From 8c09e9fe98e4989792261d230968708c34c4acde Mon Sep 17 00:00:00 2001 From: Bernardo Cardoso Date: Mon, 23 Oct 2023 11:46:40 +0100 Subject: [PATCH] updated dist folder --- dist/OutSystemsUI.css | 541 +++++++++++++++++----------- dist/OutSystemsUI.d.ts | 117 ++++-- dist/OutSystemsUI.js | 800 +++++++++++++++++++++++++++++------------ 3 files changed, 1000 insertions(+), 458 deletions(-) diff --git a/dist/OutSystemsUI.css b/dist/OutSystemsUI.css index 479134b0a7..c723d6d677 100644 --- a/dist/OutSystemsUI.css +++ b/dist/OutSystemsUI.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! -OutSystems UI 2.17.0 +OutSystems UI 2.18.0 Website: • https://www.outsystems.com/outsystems-ui GitHub: @@ -93,8 +93,8 @@ Section Index: 6.3.13. Notification 6.3.14. RangeSlider 6.3.15. Scrollable Area - 6.3.16. Search - 6.3.17. Sidebar + 6.3.16. Sidebar + 6.3.17. Search 6.3.18. Stacked Cards 6.3.19. TimePicker 6.3.20. Video @@ -145,10 +145,11 @@ Section Index: 6.8.14. Progress Circle Fraction 6.8.15. Section Index 6.8.16. Sidebar - 6.8.17. Submenu - 6.8.18. Tabs - 6.8.19. Tooltip - 6.8.20. Video + 6.8.17. Search + 6.8.18. Submenu + 6.8.19. Tabs + 6.8.20. Tooltip + 6.8.21. Video 7. Usefull Classes 7.1. a11y (Accessibility) 7.2. Colors - Brand @@ -1129,6 +1130,10 @@ body, -servicestudio-align-items:center; -servicestudio-flex-direction:row; } +.layout-blank .header-content{ + -servicestudio-align-items:center; + -servicestudio-flex-direction:row; +} .layout-side .aside-navigation{ -servicestudio-background-color:var(--color-neutral-0); -servicestudio-height:100%; @@ -2798,10 +2803,16 @@ span.validation-message{ margin-right:var(--space-base); width:auto; } +[data-upload]:focus-visible{ + border:var(--border-size-s) solid var(--color-primary); +} .is-rtl [data-upload] [data-icon]{ margin-left:var(--space-base); margin-right:var(--space-none); } +.has-accessible-features [data-upload]{ + border:var(--border-size-s) solid var(--color-neutral-7); +} /*! 4.13. Button Group */ .button-group{ background-color:transparent; @@ -4969,7 +4980,9 @@ span.flatpickr-weekday{ padding:0 5px 0 15px; } .vscomp-search-label, -.vscomp-live-region{ +.vscomp-live-region, +.vscomp-dropbox-container-top, +.vscomp-dropbox-container-bottom{ border:0; clip:rect(0 0 0 0); height:1px; @@ -7738,7 +7751,7 @@ span.flatpickr-weekday{ height:auto; left:var(--osui-floating-position-x); opacity:0; - position:absolute; + position:fixed; pointer-events:none; top:var(--osui-floating-position-y); visibility:hidden; @@ -8143,6 +8156,9 @@ span.flatpickr-weekday{ .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop::after{ left:40px; } +.flatpickr-calendar.hasTime{ + position:fixed; +} .flatpickr-calendar.hasTime .flatpickr-time{ border:var(--border-size-none); height:30px; @@ -8157,6 +8173,9 @@ span.flatpickr-weekday{ .flatpickr-calendar.hasWeeks .flatpickr-weekwrapper .flatpickr-weeks{ margin-right:var(--space-xs); } +.flatpickr-calendar.hasWeeks .flatpickr-weekwrapper .flatpickr-weeks .flatpickr-day{ + color:var(--color-neutral-5); +} .flatpickr-calendar.hasWeeks span.flatpickr-day{ height:35px; line-height:34px; @@ -8528,6 +8547,21 @@ span.flatpickr-weekday{ --osui-flatpickr-layer:calc(var(--osui-menu-layer) + var(--layer-local-tier-1)); } } +.osui-datepicker-calendar .flatpickr-months .flatpickr-month:focus-within{ + overflow:visible; +} +.osui-datepicker-calendar .numInputWrapper input:focus-visible, +.osui-datepicker-calendar .flatpickr-monthDropdown-months:focus-visible, +.osui-datepicker-calendar .flatpickr-prev-month:focus-visible, +.osui-datepicker-calendar .flatpickr-next-month:focus-visible, +.osui-datepicker-calendar .flatpickr-am-pm:focus-visible, +.osui-datepicker-calendar .flatpickr-today-button a:focus-visible{ + -webkit-box-shadow:0 0 0 3px var(--color-focus-outer); + box-shadow:0 0 0 3px var(--color-focus-outer); +} +.osui-datepicker-calendar .flatpickr-day:focus-visible{ + border-color:var(--color-focus-outer); +} .osui-datepicker input[type=date]::-webkit-inner-spin-button, .osui-datepicker input[type=date]::-webkit-calendar-picker-indicator, .osui-datepicker input[type=date]::-webkit-datetime-edit-year-field, .osui-datepicker input[type=date]::-webkit-datetime-edit-month-field, .osui-datepicker input[type=date]::-webkit-datetime-edit-day-field, .osui-datepicker input[type=date]::-webkit-datetime-edit-fields-wrapper{ display:none; -moz-appearance:none; @@ -8538,10 +8572,10 @@ span.flatpickr-weekday{ color:var(--color-neutral-6); pointer-events:none; } -.osui-datepicker > span > input:first-of-type{ - display:none !important; +.osui-datepicker input.flatpickr-input:first-of-type{ + display:none; } -.osui-datepicker > span > input:first-of-type{ +.osui-datepicker input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .osui-datepicker-calendar-ss-preview{ @@ -9641,10 +9675,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 input.flatpickr-input:first-of-type{ + display:none; } -.osui-monthpicker > span > input:first-of-type{ +.osui-monthpicker input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .form .osui-monthpicker-ss-preview{ @@ -10091,164 +10125,7 @@ body.vscomp-popup-active .vscomp-wrapper{ margin-left:unset; margin-right:var(--space-base); } -/*! 6.3.16. Search */ -.search{ - position:relative; -} -.search:empty{ - -servicestudio-height:40px; -} -.search-input{ - position:relative; -} -.search-input:empty{ - -servicestudio-background-color:#fff; - -servicestudio-border-radius:4px; - -servicestudio-height:40px; -} -.search-input:after{ - -webkit-box-align:center; - -ms-flex-align:center; - align-items:center; - color:var(--color-neutral-6); - content:"\f002"; - display:-webkit-box; - display:-ms-flexbox; - display:flex; - font:normal normal normal 14px/1 FontAwesome; - height:100%; - left:16px; - position:absolute; - top:0; -} -.search-preview{ - display:none; -} -.search .form-control[data-input]{ - padding-left:var(--space-xl); -} -.form .search input[data-input]{ - margin-bottom:var(--space-none); -} -.is-rtl .search-input:after{ - left:auto; - right:16px; -} -.is-rtl .search .form-control[data-input]{ - padding-left:var(--space-base); - padding-right:var(--space-xl); -} -.layout-native .header .search input[data-input], .layout-native .header .search input[data-input]:empty{ - border:var(--border-size-none); - padding-left:var(--space-xl); -} -.layout-native .header-right .search{ - background-color:transparent; - padding:var(--space-none); - position:static; -} -.layout-native .header-right .search.open .search-glass .search-round, .layout-native .header-right .search.open .search-glass .search-stick-bottom{ - height:24px; - right:17px; -} -.layout-native .header-right .search.open .search-glass .search-round{ - border-radius:var(--border-radius-none); - -webkit-box-shadow:inset 0 0 0 3px var(--color-neutral-6); - box-shadow:inset 0 0 0 3px var(--color-neutral-6); - -webkit-transform:rotate(135deg); - -ms-transform:rotate(135deg); - transform:rotate(135deg); - width:3px; -} -.layout-native .header-right .search.open .search-glass .search-stick-bottom{ - background-color:var(--color-neutral-6); - top:12px; - -webkit-transform:rotate(45deg); - -ms-transform:rotate(45deg); - transform:rotate(45deg); -} -.layout-native .header-right .search.open .search-input{ - -webkit-transform:translate(0, 0); - -ms-transform:translate(0, 0); - transform:translate(0, 0); -} -.layout-native .header-right .search-glass{ - display:inline-block; - height:44px; - position:relative; - width:40px; -} -.layout-native .header-right .search-round{ - border-radius:var(--border-radius-circle); - -webkit-box-shadow:inset 0 0 0 3px var(--color-neutral-6); - box-shadow:inset 0 0 0 3px var(--color-neutral-6); - height:16px; - margin-top:-10px; - position:absolute; - right:13px; - top:50%; - -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; - width:16px; -} -.layout-native .header-right .search-stick-bottom{ - background-color:var(--color-neutral-6); - content:""; - height:10px; - position:absolute; - right:12px; - top:23px; - -webkit-transform:rotate(-45deg); - -ms-transform:rotate(-45deg); - transform:rotate(-45deg); - -webkit-transition:all 300ms ease; - -o-transition:all 300ms ease; - transition:all 300ms ease; - width:3px; -} -.layout-native .header-right .search-input{ - left:var(--os-safe-area-left); - position:absolute; - right:0; - top:var(--os-safe-area-top); - -webkit-transform:translate(0, calc(-100% - var(--os-safe-area-top))); - -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{ - border-bottom:var(--border-size-s) solid transparent; -} -.layout-native .header-right .search-input ::-webkit-input-placeholder{ - color:var(--color-neutral-6); -} -.layout-native .header-content .search input[data-input], .layout-native .header-content .search input[data-input]:empty{ - border-radius:var(--border-radius-none); - height:var(--header-size); -} -.slide-from-left-enter .layout-native .header-right .search-input, -.slide-from-left-leave .layout-native .header-right .search-input, -.slide-from-right-enter .layout-native .header-right .search-input, -.slide-from-right-leave .layout-native .header-right .search-input, -.slide-from-top-enter .layout-native .header-right .search-input, -.slide-from-top-leave .layout-native .header-right .search-input, -.slide-from-bottom-enter .layout-native .header-right .search-input, -.slide-from-bottom-leave .layout-native .header-right .search-input, -.fade-enter .header-right .layout-native .search-input, -.fade-leave .header-right .layout-native .search-input{ - display:none; -} -/*! 6.3.17. Sidebar */ +/*! 6.3.16. Sidebar */ .osui-sidebar{ --overlay-opacity:0; background-color:var(--color-neutral-0); @@ -10396,6 +10273,60 @@ body.vscomp-popup-active .vscomp-wrapper{ .phone .osui-sidebar{ max-width:85vw; } +/*! 6.3.17. Search */ +.osui-search{ + position:relative; +} +.osui-search:empty{ + -servicestudio-height:40px; +} +.osui-search__input{ + position:relative; +} +.osui-search__input:empty{ + -servicestudio-background-color:#fff; + -servicestudio-border-radius:4px; + -servicestudio-height:40px; +} +.osui-search__input input[data-input]{ + background-image:url(data:image/svg+xml;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDAxIiB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmNvbS9zdmdqcyI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMDIiPjwvZGVmcz48ZyBpZD0iU3ZnanNHMTAwOCI+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjY0IDE2NjQiIHdpZHRoPSIyODgiIGhlaWdodD0iMjg4Ij48cGF0aCBmaWxsPSIjYWRiNWJkIiBkPSJNMTE1MiA3MDRxMC0xODUtMTMxLjUtMzE2LjVUNzA0IDI1NlQzODcuNSAzODcuNVQyNTYgNzA0dDEzMS41IDMxNi41VDcwNCAxMTUydDMxNi41LTEzMS41VDExNTIgNzA0em01MTIgODMycTAgNTItMzggOTB0LTkwIDM4cS01NCAwLTkwLTM4bC0zNDMtMzQycS0xNzkgMTI0LTM5OSAxMjRxLTE0MyAwLTI3My41LTU1LjV0LTIyNS0xNTB0LTE1MC0yMjVUMCA3MDR0NTUuNS0yNzMuNXQxNTAtMjI1dDIyNS0xNTBUNzA0IDB0MjczLjUgNTUuNXQyMjUgMTUwdDE1MCAyMjVUMTQwOCA3MDRxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgY2xhc3M9ImNvbG9yY3VycmVudENvbG9yIHN2Z1NoYXBlIj48L3BhdGg+PC9zdmc+PC9nPjwvc3ZnPg==); + background-position:left var(--space-base) center; + background-repeat:no-repeat; + background-size:14px auto; +} +.osui-search .form-control[data-input]{ + padding-left:var(--space-xl); +} +.form .osui-search input[data-input]{ + margin-bottom:var(--space-none); +} +.is-rtl .osui-search__input:after{ + left:auto; + right:var(--space-base); +} +.is-rtl .osui-search .form-control[data-input]{ + padding-left:var(--space-base); + padding-right:var(--space-xl); +} +.layout-native .header .osui-search input[data-input], .layout-native .header .osui-search input[data-input]:empty{ + border:var(--border-size-none); + padding-left:var(--space-xl); +} +.layout-native .header-content .osui-search input[data-input], .layout-native .header-content .osui-search input[data-input]:empty{ + border-radius:var(--border-radius-none); +} +.slide-from-left-enter .layout-native .header-right .osui-search__input, +.slide-from-left-leave .layout-native .header-right .osui-search__input, +.slide-from-right-enter .layout-native .header-right .osui-search__input, +.slide-from-right-leave .layout-native .header-right .osui-search__input, +.slide-from-top-enter .layout-native .header-right .osui-search__input, +.slide-from-top-leave .layout-native .header-right .osui-search__input, +.slide-from-bottom-enter .layout-native .header-right .osui-search__input, +.slide-from-bottom-leave .layout-native .header-right .osui-search__input, +.fade-enter .header-right .layout-native .osui-search__input, +.fade-leave .header-right .layout-native .osui-search__input{ + display:none; +} /*! 6.3.18. Stacked Cards */ .stackedcards{ position:relative; @@ -10616,10 +10547,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 input.flatpickr-input:first-of-type{ + display:none; } -.osui-timepicker > span > input:first-of-type{ +.osui-timepicker input.flatpickr-input:first-of-type{ -servicestudio-display:inline-flex !important; } .osui-timepicker__dropdown-ss-preview{ @@ -10834,6 +10765,7 @@ html[data-uieditorversion^="1"] .osui-timepicker__dropdown-ss-preview.time12h, h } /*! 6.4.3. OverflowMenu */ .osui-overflow-menu{ + display:inline-block; --osui-overflow-menu-min-width:170px; --border-radius-rounded:16px; } @@ -12312,6 +12244,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; @@ -12333,6 +12266,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; @@ -12374,41 +12310,64 @@ 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{ +.rating input:checked + .rating-item .rating-item-empty, .rating input:checked ~ .rating-item .rating-item-filled{ opacity:0; } -.rating.is-half .rating-item-half{ - z-index:var(--layer-local-tier-1); +.rating.is-half input:checked ~ .rating-item .rating-item-half{ + opacity:0; } -.rating.is-half input:checked + label .rating-item-half{ +.rating:hover input + .rating-item .rating-item-filled{ opacity:1; } -.rating.is-half input:checked + label .rating-item-filled{ +.rating input{ +} +.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 input:first-of-type:focus:checked + .rating-item{ + display:block; +} +.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:hover input + label .rating-item-filled, .rating.is-half:hover input:checked + label .rating-item-filled{ +.rating input:hover + .rating-item .rating-item-filled{ opacity:1; } -.rating input:focus + label .rating-item-empty, -.rating input:hover ~ label .rating-item-filled{ +.rating.is-half .rating-item-half{ + z-index:var(--layer-local-tier-1); +} +.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; } -.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:hover input:checked + .rating-item .rating-item-filled, +.rating.is-half input:hover + .rating-item .rating-item-filled{ 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:hover input:hover ~ .rating-item .rating-item-filled{ 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:hover + .rating-item .rating-item-filled{ opacity:1; } .rating .icon-states{ @@ -12431,7 +12390,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); } @@ -12969,7 +12938,7 @@ html[data-uieditorversion^="1"] .wizard-wrapper-item{ background-color:var(--color-neutral-6); } .osui-dropdown-serverside__balloon-content > *:not([data-list]){ - z-index:var(--layer-local-tier-1); + z-index:var(--layer-local-tier-2); } .osui-dropdown-serverside__balloon--has-not-search .osui-dropdown-serverside__balloon-content{ border-top:none; @@ -13065,9 +13034,18 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown .has-accessible-features .osui-dropdown-serverside__balloon-search:before{ color:var(--color-neutral-7); } +.has-accessible-features .osui-dropdown-serverside__balloon-search input:focus, +.has-accessible-features .osui-dropdown-serverside__balloon-search .form-control[data-input]:focus{ + -webkit-box-shadow:inset 0 0 0 3px var(--color-focus-outer); + box-shadow:inset 0 0 0 3px var(--color-focus-outer); +} .has-accessible-features .osui-dropdown-serverside__balloon-content::-webkit-scrollbar-thumb{ background-color:var(--color-neutral-7); } +.has-accessible-features .osui-dropdown-serverside__balloon-content:focus{ + -webkit-box-shadow:inset 0 0 0 3px var(--color-focus-outer); + box-shadow:inset 0 0 0 3px var(--color-focus-outer); +} .is-rtl .osui-dropdown-serverside__selected-values{ margin-left:var(--space-base); margin-right:initial; @@ -13161,7 +13139,7 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown -webkit-box-align:center; -ms-flex-align:center; align-items:center; - background-color:var(--color-neutral-0); + background-color:transparent; color:var(--color-neutral-9); cursor:pointer; display:-webkit-box; @@ -13211,6 +13189,10 @@ body:has(.popup-dialog):has(.osui-dropdown-serverside--is-opened) .osui-dropdown .has-accessible-features .osui-dropdown-serverside-item:hover{ background-color:var(--color-neutral-4); } +.has-accessible-features .osui-dropdown-serverside-item:focus{ + -webkit-box-shadow:inset 0 0 0 3px var(--color-focus-outer); + box-shadow:inset 0 0 0 3px var(--color-focus-outer); +} .tablet .osui-dropdown-serverside-item, .phone .osui-dropdown-serverside-item{ height:48px; @@ -14967,7 +14949,164 @@ input.OSFillParent.calendar-input{ .phone .sidebar{ width:85vw; } -/*! 6.8.17. Submenu */ +/*! 6.8.17. Search */ +.search{ + position:relative; +} +.search:empty{ + -servicestudio-height:40px; +} +.search-input{ + position:relative; +} +.search-input:empty{ + -servicestudio-background-color:#fff; + -servicestudio-border-radius:4px; + -servicestudio-height:40px; +} +.search-input:after{ + -webkit-box-align:center; + -ms-flex-align:center; + align-items:center; + color:var(--color-neutral-6); + content:"\f002"; + display:-webkit-box; + display:-ms-flexbox; + display:flex; + font:normal normal normal 14px/1 FontAwesome; + height:100%; + left:16px; + position:absolute; + top:0; +} +.search-preview{ + display:none; +} +.search .form-control[data-input]{ + padding-left:var(--space-xl); +} +.form .search input[data-input]{ + margin-bottom:var(--space-none); +} +.is-rtl .search-input:after{ + left:auto; + right:16px; +} +.is-rtl .search .form-control[data-input]{ + padding-left:var(--space-base); + padding-right:var(--space-xl); +} +.layout-native .header .search input[data-input], .layout-native .header .search input[data-input]:empty{ + border:var(--border-size-none); + padding-left:var(--space-xl); +} +.layout-native .header-right .search{ + background-color:transparent; + padding:var(--space-none); + position:static; +} +.layout-native .header-right .search.open .search-glass .search-round, .layout-native .header-right .search.open .search-glass .search-stick-bottom{ + height:24px; + right:17px; +} +.layout-native .header-right .search.open .search-glass .search-round{ + border-radius:var(--border-radius-none); + -webkit-box-shadow:inset 0 0 0 3px var(--color-neutral-6); + box-shadow:inset 0 0 0 3px var(--color-neutral-6); + -webkit-transform:rotate(135deg); + -ms-transform:rotate(135deg); + transform:rotate(135deg); + width:3px; +} +.layout-native .header-right .search.open .search-glass .search-stick-bottom{ + background-color:var(--color-neutral-6); + top:12px; + -webkit-transform:rotate(45deg); + -ms-transform:rotate(45deg); + transform:rotate(45deg); +} +.layout-native .header-right .search.open .search-input{ + -webkit-transform:translate(0, 0); + -ms-transform:translate(0, 0); + transform:translate(0, 0); +} +.layout-native .header-right .search-glass{ + display:inline-block; + height:44px; + position:relative; + width:40px; +} +.layout-native .header-right .search-round{ + border-radius:var(--border-radius-circle); + -webkit-box-shadow:inset 0 0 0 3px var(--color-neutral-6); + box-shadow:inset 0 0 0 3px var(--color-neutral-6); + height:16px; + margin-top:-10px; + position:absolute; + right:13px; + top:50%; + -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; + transition:all 300ms ease; + width:16px; +} +.layout-native .header-right .search-stick-bottom{ + background-color:var(--color-neutral-6); + content:""; + height:10px; + position:absolute; + right:12px; + top:23px; + -webkit-transform:rotate(-45deg); + -ms-transform:rotate(-45deg); + transform:rotate(-45deg); + -webkit-transition:all 300ms ease; + -o-transition:all 300ms ease; + transition:all 300ms ease; + width:3px; +} +.layout-native .header-right .search-input{ + left:var(--os-safe-area-left); + position:absolute; + right:0; + top:var(--os-safe-area-top); + -webkit-transform:translate(0, calc(-100% - var(--os-safe-area-top))); + -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{ + border-bottom:var(--border-size-s) solid transparent; +} +.layout-native .header-right .search-input ::-webkit-input-placeholder{ + color:var(--color-neutral-6); +} +.layout-native .header-content .search input[data-input], .layout-native .header-content .search input[data-input]:empty{ + border-radius:var(--border-radius-none); + height:var(--header-size); +} +.slide-from-left-enter .layout-native .header-right .search-input, +.slide-from-left-leave .layout-native .header-right .search-input, +.slide-from-right-enter .layout-native .header-right .search-input, +.slide-from-right-leave .layout-native .header-right .search-input, +.slide-from-top-enter .layout-native .header-right .search-input, +.slide-from-top-leave .layout-native .header-right .search-input, +.slide-from-bottom-enter .layout-native .header-right .search-input, +.slide-from-bottom-leave .layout-native .header-right .search-input, +.fade-enter .header-right .layout-native .search-input, +.fade-leave .header-right .layout-native .search-input{ + display:none; +} +/*! 6.8.18. Submenu */ .submenu{ cursor:pointer; display:-webkit-inline-box; @@ -15277,7 +15416,7 @@ input.OSFillParent.calendar-input{ border-left:var(--border-size-none); border-right:var(--border-size-m) solid var(--color-primary); } -/*! 6.8.18. Tabs */ +/*! 6.8.19. Tabs */ .tabs{ display:-webkit-box; display:-ms-flexbox; @@ -15528,7 +15667,7 @@ input.OSFillParent.calendar-input{ border-left:var(--border-size-m) solid var(--color-primary); border-right:var(--border-size-none); } -/*! 6.8.19. Tooltip */ +/*! 6.8.20. Tooltip */ .tooltip{ display:inline-block; position:relative; @@ -15706,7 +15845,7 @@ input.OSFillParent.calendar-input{ .layout-native .tabs-content .tooltip-background{ position:absolute; } -/*! 6.8.20. Video */ +/*! 6.8.21. Video */ .video-preview{ display:block; } diff --git a/dist/OutSystemsUI.d.ts b/dist/OutSystemsUI.d.ts index 9ff716ea65..8f4f3c3267 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; @@ -31,12 +32,14 @@ declare namespace OSFramework.OSUI.Constants { }; Role: { Alert: string; + AlertDialog: string; AttrName: string; Button: string; Complementary: string; Listbox: string; MenuItem: string; Option: string; + Presentation: string; Progressbar: string; Region: string; Search: string; @@ -80,7 +83,7 @@ declare namespace OSFramework.OSUI.Constants { const AccessibilityHideElementClass = "wcag-hide-text"; const IsRTLClass = "is-rtl"; const NoTransition = "no-transition"; - const OSUIVersion = "2.17.0"; + const OSUIVersion = "2.18.0"; const ZeroValue = 0; } declare namespace OSFramework.OSUI.ErrorCodes { @@ -178,6 +181,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", @@ -188,7 +192,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", @@ -220,8 +224,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", @@ -230,8 +234,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", @@ -281,6 +285,7 @@ declare namespace OSFramework.OSUI.GlobalEnum { Class = "class", DataInput = "data-input", Disabled = "disabled", + Href = "href", Id = "id", Name = "name", StatusBar = "data-status-bar-height", @@ -294,6 +299,7 @@ declare namespace OSFramework.OSUI.GlobalEnum { FieldSet = "fieldset", Input = "input", Link = "a", + Radio = "radio", Span = "span" } enum HTMLEvent { @@ -343,8 +349,10 @@ declare namespace OSFramework.OSUI.GlobalEnum { ArrowLeft = "ArrowLeft", ArrowRight = "ArrowRight", ArrowUp = "ArrowUp", + End = "End", Enter = "Enter", Escape = "Escape", + Home = "Home", Shift = "Shift", ShiftTab = "ShiftTab", Space = " ", @@ -397,8 +405,8 @@ declare namespace OSFramework.OSUI.GlobalEnum { Submenu = "Submenu", SwipeEvents = "SwipeEvents", Tabs = "Tabs", - TabsHeaderItem = "TabsHeaderItem", TabsContentItem = "TabsContentItem", + TabsHeaderItem = "TabsHeaderItem", Timepicker = "Timepicker", Tooltip = "Tooltip", TouchEvents = "TouchEvents", @@ -640,12 +648,6 @@ declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { private _bodyTrigger; } } -declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { - class BodyOnScroll extends AbstractListener { - constructor(); - private _bodyTrigger; - } -} declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { interface IListener extends IEvent { disableBodyClickEvent?(): void; @@ -656,9 +658,9 @@ declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { enum Type { BalloonOnToggle = "balloon.onToggle", BodyOnClick = "body.onclick", - BodyOnScroll = "body.onscroll", BodyOnMouseDown = "body.mousedown", OrientationChange = "window.onorientationchange", + ScreenOnScroll = "screen.onscroll", WindowResize = "window.onresize", WindowMessage = "window.message" } @@ -678,6 +680,12 @@ declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { private _orientationTrigger; } } +declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { + class ScreenOnScroll extends AbstractListener { + constructor(); + private _screenTrigger; + } +} declare namespace OSFramework.OSUI.Event.DOMEvents.Listeners { class WindowMessage extends AbstractListener { constructor(); @@ -883,18 +891,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; @@ -905,7 +916,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; @@ -929,6 +940,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; } @@ -1059,6 +1071,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; @@ -1090,6 +1104,7 @@ declare namespace OSFramework.OSUI.Helper { static RoleListbox(element: HTMLElement): void; static RoleMenuItem(element: HTMLElement): void; static RoleOption(element: HTMLElement): void; + static RolePresentation(element: HTMLElement): void; static RoleProgressBar(element: HTMLElement): void; static RoleRegion(element: HTMLElement): void; static RoleSearch(element: HTMLElement): void; @@ -1910,11 +1925,11 @@ declare namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { private _balloonWrapperElement; private _closeDynamically; private _eventOnBodyClick; - private _eventOnBodyScroll; private _eventOnClick; private _eventOnClickInputSearch; private _eventOnCloseTransitionEnd; private _eventOnOrientationChange; + private _eventOnScreenScroll; private _eventOnSearchInputBlur; private _eventOnSearchInputFocus; private _eventOnSpanFocus; @@ -1927,7 +1942,6 @@ declare namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { private _isBlocked; private _isOpen; private _platformEventOnToggleCallback; - private _requestAnimationOnBodyScroll; private _selectValuesWrapper; private _selectValuesWrapperAriaLabel; private _selfElementBoundingClientRect; @@ -1941,9 +1955,9 @@ declare namespace OSFramework.OSUI.Patterns.Dropdown.ServerSide { private _hasNoImplementation; private _moveBallonElement; private _onBodyClick; - private _onBodyScroll; private _onKeyboardPressed; private _onOrientationChange; + private _onScreenScroll; private _onSearchInputBlur; private _onSearchInputClicked; private _onSearchInputFocus; @@ -2452,6 +2466,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 { @@ -2461,6 +2476,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu { private _balloonFeature; private _eventBalloonOnToggle; private _eventOnClick; + private _eventOnKeydown; private _isDisabled; private _isOpenedByApi; private _platformEventOnToggle; @@ -2470,6 +2486,7 @@ declare namespace OSFramework.OSUI.Patterns.OverflowMenu { constructor(uniqueId: string, configs: JSON); private _balloonOnToggleCallback; private _onClickCallback; + private _onKeydownCallback; private _setBalloonFeature; private _setOverflowMenuShape; private _togglePattern; @@ -2487,7 +2504,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; @@ -2866,6 +2883,27 @@ declare namespace OSFramework.OSUI.Patterns.Rating { constructor(config: JSON); } } +declare namespace OSFramework.OSUI.Patterns.Search { + interface ISearch extends Interface.IPattern { + } +} +declare namespace OSFramework.OSUI.Patterns.Search { + class Search extends AbstractPattern implements ISearch { + constructor(uniqueId: string, configs: JSON); + protected setA11YProperties(): void; + protected setCallbacks(): void; + protected setHtmlElements(): void; + protected unsetCallbacks(): void; + protected unsetHtmlElements(): void; + build(): void; + dispose(): void; + } +} +declare namespace OSFramework.OSUI.Patterns.Search { + class SearchConfig extends AbstractConfiguration { + constructor(config: JSON); + } +} declare namespace OSFramework.OSUI.Patterns.SectionIndex.Enum { enum ChildNotifyActionType { Active = "active", @@ -2946,8 +2984,8 @@ declare namespace OSFramework.OSUI.Patterns.SectionIndexItem { } declare namespace OSFramework.OSUI.Patterns.SectionIndexItem { class SectionIndexItem extends AbstractChild implements ISectionIndexItem { - private _eventOnBodyScroll; private _eventOnClick; + private _eventOnScreenScroll; private _eventOnkeyBoardPress; private _headerHeight; private _headerIsFixed; @@ -2956,8 +2994,8 @@ declare namespace OSFramework.OSUI.Patterns.SectionIndexItem { private _targetElement; private _targetElementOffset; constructor(uniqueId: string, configs: JSON); - private _onBodyScroll; private _onKeyboardPressed; + private _onScreenScroll; private _onSelected; private _removeEvents; private _setHeaderSize; @@ -3116,10 +3154,13 @@ declare namespace OSFramework.OSUI.Patterns.Submenu { } declare namespace OSFramework.OSUI.Patterns.Submenu { class Submenu extends AbstractPattern implements ISubmenu { + private _eventBalloonKeypress; private _eventClick; private _eventKeypress; private _eventOnMouseEnter; private _eventOnMouseLeave; + private _focusManagerInstance; + private _focusTrapInstance; private _globalEventBody; private _hasActiveLinks; private _hasElements; @@ -3135,6 +3176,8 @@ declare namespace OSFramework.OSUI.Patterns.Submenu { private _bodyClickCallback; private _checkForActiveLinks; private _clickCallback; + private _handleFocusBehavior; + private _keypressBalloonCallback; private _keypressCallback; private _onMouseEnterCallback; private _onMouseLeaveCallback; @@ -3273,6 +3316,9 @@ declare namespace OSFramework.OSUI.Patterns.Tabs.Enum { enum ObserverOptions { RootMargin = "1px" } + enum ElementsBlockingOnChange { + Dropdown = ".pop-comp-active" + } enum ChildTypes { TabsContentItem = "TabsContentItem", TabsHeaderItem = "TabsHeaderItem" @@ -3555,11 +3601,13 @@ declare namespace OSFramework.OSUI.Patterns.Tooltip { private _eventOnBalloonClick; private _eventOnBlur; private _eventOnBodyClick; - private _eventOnBodyScroll; private _eventOnClick; private _eventOnFocus; + private _eventOnKeypress; private _eventOnOpenedBalloon; + private _eventOnScreenScroll; private _eventOnWindowResize; + private _focusManagerInstance; private _intersectionObserver; private _isBalloonWrapperMouseEnter; private _isIconMouseEnter; @@ -3581,13 +3629,14 @@ declare namespace OSFramework.OSUI.Patterns.Tooltip { private _onBalloonWrapperMouseLeave; private _onBlur; private _onBodyClick; - private _onBodyScroll; private _onClick; private _onFocus; private _onIconMouseEnter; private _onIconMouseLeave; private _onOpenedBalloon; + private _onScreenScroll; private _onWindowResize; + private _onkeypressCallback; private _setBalloonCoordinates; private _setBalloonPosition; private _setBalloonWrapperExtendedClass; @@ -3995,9 +4044,7 @@ declare namespace OutSystems.OSUI.ErrorCodes { }; const Search: { FailChangeProperty: string; - FailClose: string; FailDispose: string; - FailOpen: string; FailRegisterCallback: string; }; const SectionIndexItem: { @@ -4368,6 +4415,15 @@ declare namespace OutSystems.OSUI.Patterns.RatingAPI { function Initialize(ratingId: string): OSFramework.OSUI.Patterns.Rating.IRating; function RegisterCallback(ratingId: string, eventName: string, callback: OSFramework.OSUI.GlobalCallbacks.OSGeneric): string; } +declare namespace OutSystems.OSUI.Patterns.SearchAPI { + function ChangeProperty(searchId: string, propertyName: string, propertyValue: any): string; + function Create(searchId: string, configs: string): OSFramework.OSUI.Patterns.Search.ISearch; + function Dispose(searchId: string): string; + function GetAllSearches(): Array; + function GetSearchById(searchId: string): OSFramework.OSUI.Patterns.Search.ISearch; + function Initialize(searchId: string): OSFramework.OSUI.Patterns.Search.ISearch; + function RegisterCallback(searchId: string, eventName: string, callback: OSFramework.OSUI.GlobalCallbacks.OSGeneric): string; +} declare namespace OutSystems.OSUI.Patterns.SectionIndexAPI { function ChangeProperty(sectionIndexId: string, propertyName: string, propertyValue: any): string; function Create(sectionIndexId: string, configs: string): OSFramework.OSUI.Patterns.SectionIndex.ISectionIndex; @@ -4616,6 +4672,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; } @@ -4763,6 +4825,8 @@ declare namespace Providers.OSUI.Datepicker.Flatpickr { abstract class AbstractFlatpickr extends OSFramework.OSUI.Patterns.DatePicker.AbstractDatePicker implements IFlatpickr { private _a11yInfoContainerElem; private _bodyScrollCommonBehaviour; + private _providerFocusSpanTarget; + private _todayButtonElem; private _zindexCommonBehavior; protected datePickerPlatformInputElem: HTMLInputElement; protected flatpickrInputElem: HTMLInputElement; @@ -4772,6 +4836,7 @@ declare namespace Providers.OSUI.Datepicker.Flatpickr { private _setAttributes; private _setCalendarCssClasses; private _setParentMinHeight; + private _todayButtonKeydown; private _unsetParentMinHeight; protected addTodayBtn(): void; protected createProviderInstance(): void; @@ -5936,11 +6001,11 @@ declare namespace Providers.OSUI.SharedProviderResources.Flatpickr.Enum { } declare namespace Providers.OSUI.SharedProviderResources.Flatpickr { class UpdatePositionOnScroll { - private _onBodyScrollEvent; + private _onScreenScrollEvent; private _picker; private _requestAnimationOnBodyScroll; constructor(picker: Datepicker.Flatpickr.IFlatpickr | TimePicker.Flatpickr.IFlatpickrTime | MonthPicker.Flatpickr.IFlatpickrMonth); - private _onBodyScroll; + private _onScreenScroll; private _setCallbacks; private _setUpEvents; private _unsetCallbacks; diff --git a/dist/OutSystemsUI.js b/dist/OutSystemsUI.js index 0a5565d7c7..840337065a 100644 --- a/dist/OutSystemsUI.js +++ b/dist/OutSystemsUI.js @@ -1,5 +1,5 @@ /*! -OutSystems UI 2.17.0 +OutSystems UI 2.18.0 Website: • https://www.outsystems.com/outsystems-ui GitHub: @@ -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', @@ -73,12 +74,14 @@ var OSFramework; }, Role: { Alert: 'alert', + AlertDialog: 'alertdialog', AttrName: 'role', Button: 'button', Complementary: 'complementary', Listbox: 'listbox', MenuItem: 'menuitem', Option: 'option', + Presentation: 'presentation', Progressbar: 'progressbar', Region: 'region', Search: 'search', @@ -135,7 +138,7 @@ var OSFramework; Constants.AccessibilityHideElementClass = 'wcag-hide-text'; Constants.IsRTLClass = 'is-rtl'; Constants.NoTransition = 'no-transition'; - Constants.OSUIVersion = '2.17.0'; + Constants.OSUIVersion = '2.18.0'; Constants.ZeroValue = 0; })(Constants = OSUI.Constants || (OSUI.Constants = {})); })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); @@ -241,6 +244,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"; @@ -251,7 +255,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) { @@ -288,8 +292,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"; @@ -298,8 +302,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) { @@ -355,6 +359,7 @@ 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"; @@ -369,6 +374,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; @@ -422,8 +428,10 @@ var OSFramework; Keycodes["ArrowLeft"] = "ArrowLeft"; Keycodes["ArrowRight"] = "ArrowRight"; Keycodes["ArrowUp"] = "ArrowUp"; + Keycodes["End"] = "End"; Keycodes["Enter"] = "Enter"; Keycodes["Escape"] = "Escape"; + Keycodes["Home"] = "Home"; Keycodes["Shift"] = "Shift"; Keycodes["ShiftTab"] = "ShiftTab"; Keycodes["Space"] = " "; @@ -480,8 +488,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"; @@ -1208,32 +1216,6 @@ var OSFramework; })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); })(OSFramework || (OSFramework = {})); var OSFramework; -(function (OSFramework) { - var OSUI; - (function (OSUI) { - var Event; - (function (Event) { - var DOMEvents; - (function (DOMEvents) { - var Listeners; - (function (Listeners) { - class BodyOnScroll extends Listeners.AbstractListener { - constructor() { - super(document.body, OSUI.GlobalEnum.HTMLEvent.Scroll); - this.useCapture = true; - this.eventCallback = this._bodyTrigger.bind(this); - } - _bodyTrigger(evt) { - this.trigger(OSUI.GlobalEnum.HTMLEvent.Scroll, evt); - } - } - Listeners.BodyOnScroll = BodyOnScroll; - })(Listeners = DOMEvents.Listeners || (DOMEvents.Listeners = {})); - })(DOMEvents = Event.DOMEvents || (Event.DOMEvents = {})); - })(Event = OSUI.Event || (OSUI.Event = {})); - })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); -})(OSFramework || (OSFramework = {})); -var OSFramework; (function (OSFramework) { var OSUI; (function (OSUI) { @@ -1247,9 +1229,9 @@ var OSFramework; (function (Type) { Type["BalloonOnToggle"] = "balloon.onToggle"; Type["BodyOnClick"] = "body.onclick"; - Type["BodyOnScroll"] = "body.onscroll"; Type["BodyOnMouseDown"] = "body.mousedown"; Type["OrientationChange"] = "window.onorientationchange"; + Type["ScreenOnScroll"] = "screen.onscroll"; Type["WindowResize"] = "window.onresize"; Type["WindowMessage"] = "window.message"; })(Type = Listeners.Type || (Listeners.Type = {})); @@ -1275,16 +1257,14 @@ var OSFramework; return new Listeners.BalloonOnToggle(); case Listeners.Type.BodyOnClick: return new Listeners.BodyOnClick(); - case Listeners.Type.BodyOnScroll: - return new Listeners.BodyOnScroll(); case Listeners.Type.BodyOnMouseDown: return new Listeners.BodyOnMouseDown(); case Listeners.Type.WindowResize: return new Listeners.WindowResize(); case Listeners.Type.OrientationChange: return new Listeners.OrientationChange(); - case Listeners.Type.WindowMessage: - return new Listeners.WindowMessage(); + case Listeners.Type.ScreenOnScroll: + return new Listeners.ScreenOnScroll(); default: throw new Error(`The listener ${listenerType} is not supported.`); } @@ -1329,6 +1309,31 @@ var OSFramework; })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); })(OSFramework || (OSFramework = {})); var OSFramework; +(function (OSFramework) { + var OSUI; + (function (OSUI) { + var Event; + (function (Event) { + var DOMEvents; + (function (DOMEvents) { + var Listeners; + (function (Listeners) { + class ScreenOnScroll extends Listeners.AbstractListener { + constructor() { + super(OSUI.Helper.Dom.ClassSelector(document, OSUI.GlobalEnum.CssClassElements.ActiveScreen), OSUI.GlobalEnum.HTMLEvent.Scroll); + this.eventCallback = this._screenTrigger.bind(this); + } + _screenTrigger(evt) { + this.trigger(OSUI.GlobalEnum.HTMLEvent.Scroll, evt); + } + } + Listeners.ScreenOnScroll = ScreenOnScroll; + })(Listeners = DOMEvents.Listeners || (DOMEvents.Listeners = {})); + })(DOMEvents = Event.DOMEvents || (Event.DOMEvents = {})); + })(Event = OSUI.Event || (OSUI.Event = {})); + })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); +})(OSFramework || (OSFramework = {})); +var OSFramework; (function (OSFramework) { var OSUI; (function (OSUI) { @@ -1864,7 +1869,8 @@ var OSFramework; } _bodyClickCallback(_args, e) { var _a; - if (e.target === ((_a = this.featureOptions) === null || _a === void 0 ? void 0 : _a.anchorElem) || this._isOpenedByApi) { + const _eventTarget = e.target; + if (_eventTarget === ((_a = this.featureOptions) === null || _a === void 0 ? void 0 : _a.anchorElem) || this._isOpenedByApi || this.featureElem.contains(_eventTarget)) { return; } if (this.isOpen) { @@ -1879,10 +1885,46 @@ 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) { + OSUI.Helper.AsyncInvocation(() => { + this.featureElem.focus(); + }); + } + else { + OSUI.Helper.AsyncInvocation(() => { + 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.preventDefault(); + } } e.stopPropagation(); } @@ -1916,7 +1958,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); @@ -1931,9 +1973,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(); @@ -1944,6 +1985,8 @@ var OSFramework; this._focusManagerInstance.setFocusToStoredElement(); } }); + this._focusableBalloonElements = undefined; + this._currentFocusedElementIndex = undefined; } this._onToggleEvent(this.isOpen, this.featureElem); OSUI.Helper.AsyncInvocation(() => { @@ -1975,10 +2018,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) { @@ -2933,6 +2976,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); } @@ -3026,6 +3075,9 @@ var OSFramework; static RoleOption(element) { Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Option); } + static RolePresentation(element) { + Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Presentation); + } static RoleProgressBar(element) { Helper.Dom.Attribute.Set(element, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Progressbar); } @@ -4496,9 +4548,17 @@ var OSFramework; this._animateOnDragInstance.onDragStart(true, OSUI.GlobalEnum.Direction.Down, x, y, true, this.selfElement.clientHeight.toString()); } _onkeypressCallback(e) { - const isEscapedPressed = e.key === OSUI.GlobalEnum.Keycodes.Escape; - if (isEscapedPressed && this._isOpen) { - this.close(); + var _a, _b; + switch (e.key) { + case OSUI.GlobalEnum.Keycodes.Escape: + this.close(); + break; + case OSUI.GlobalEnum.Keycodes.End: + (_a = this._focusTrapInstance.focusableElements[this._focusTrapInstance.focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus(); + break; + case OSUI.GlobalEnum.Keycodes.Home: + (_b = this._focusTrapInstance.focusableElements[0]) === null || _b === void 0 ? void 0 : _b.focus(); + break; } } _toggleBottomSheet(isOpen) { @@ -4549,7 +4609,7 @@ var OSFramework; } setA11YProperties() { if (!this.isBuilt) { - OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSUI.Constants.A11YAttributes.Role.Complementary, true); + OSUI.Helper.A11Y.RoleComplementary(this.selfElement); } OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSUI.Constants.A11YAttributes.Aria.Hidden, (!this._isOpen).toString()); OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSUI.Constants.A11YAttributes.TabIndex, this._isOpen @@ -4748,12 +4808,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) { @@ -5328,7 +5391,6 @@ var OSFramework; } OSUI.Helper.Dom.Styles.RemoveClass(document.body, ServerSide.Enum.CssClass.IsVisible); this._touchMove(); - cancelAnimationFrame(this._requestAnimationOnBodyScroll); this._isOpen = false; this._updatePatternState(); this._unsetObserver(); @@ -5393,28 +5455,6 @@ var OSFramework; this._close(); } } - _onBodyScroll(_eventType, event) { - if (this.isBuilt) { - if (event !== undefined && event.target === this._balloonContentElement) { - cancelAnimationFrame(this._requestAnimationOnBodyScroll); - return; - } - if (this._isOpen && OSUI.Helper.DeviceInfo.IsDesktop === false) { - cancelAnimationFrame(this._requestAnimationOnBodyScroll); - if (OSUI.Helper.DeviceInfo.IsTablet) { - this._close(); - } - return; - } - if (this._isOpen) { - this._setBalloonCoordinates(false); - this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnBodyScroll); - } - else { - cancelAnimationFrame(this._requestAnimationOnBodyScroll); - } - } - } _onKeyboardPressed(event) { event.stopPropagation(); switch (event.target) { @@ -5422,7 +5462,11 @@ var OSFramework; if (event.key === OSUI.GlobalEnum.Keycodes.Escape) { this._close(); } - if (event.key === OSUI.GlobalEnum.Keycodes.Enter || event.key === OSUI.GlobalEnum.Keycodes.Space) { + if (event.key === OSUI.GlobalEnum.Keycodes.Enter || + event.key === OSUI.GlobalEnum.Keycodes.Space || + event.key === OSUI.GlobalEnum.Keycodes.ArrowUp || + event.key === OSUI.GlobalEnum.Keycodes.ArrowDown || + event.key === OSUI.GlobalEnum.Keycodes.Home) { this._selectValuesWrapper.click(); } break; @@ -5457,6 +5501,15 @@ var OSFramework; this._close(); } } + _onScreenScroll() { + if (this.isBuilt && this._isOpen) { + if (OSUI.Helper.DeviceInfo.IsTablet) { + this._close(); + return; + } + requestAnimationFrame(this._setBalloonCoordinates.bind(this)); + } + } _onSearchInputBlur() { OSUI.Helper.Dom.Styles.RemoveClass(this._balloonWrapperElement, ServerSide.Enum.CssClass.SearchInputIsFocused); } @@ -5571,11 +5624,8 @@ var OSFramework; selfElement.x === this._selfElementBoundingClientRect.x && selfElement.right === this._selfElementBoundingClientRect.x + this._selfElementBoundingClientRect.width && - selfElement.y === this._selfElementBoundingClientRect.y)) { - cancelAnimationFrame(this._requestAnimationOnBodyScroll); - return; - } - this._selfElementBoundingClientRect.x = selfElement.x; + selfElement.y === this._selfElementBoundingClientRect.y)) + this._selfElementBoundingClientRect.x = selfElement.x; this._selfElementBoundingClientRect.y = selfElement.y; OSUI.Helper.Dom.Styles.SetStyleAttribute(this._balloonWrapperElement, ServerSide.Enum.InlineCssVariables.Top, selfElement.top + OSUI.GlobalEnum.Units.Pixel); OSUI.Helper.Dom.Styles.SetStyleAttribute(this._balloonWrapperElement, ServerSide.Enum.InlineCssVariables.Left, selfElement.left + OSUI.GlobalEnum.Units.Pixel); @@ -5633,8 +5683,9 @@ var OSFramework; this._balloonSearchInputElement.addEventListener(OSUI.GlobalEnum.HTMLEvent.Focus, this._eventOnSearchInputFocus); } OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._eventOnBodyClick); - OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._eventOnBodyScroll); - this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnBodyScroll); + if (OSUI.Helper.DeviceInfo.IsPhone === false) { + OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._eventOnScreenScroll); + } OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.WindowResize, this._eventOnWindowResize); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.OrientationChange, this._eventOnOrientationChange); } @@ -5665,7 +5716,9 @@ var OSFramework; this._balloonSearchInputElement.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Focus, this._eventOnSearchInputFocus); } OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._eventOnBodyClick); - OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._eventOnBodyScroll); + if (OSUI.Helper.DeviceInfo.IsPhone === false) { + OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._eventOnScreenScroll); + } OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.WindowResize, this._eventOnWindowResize); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.OrientationChange, this._eventOnOrientationChange); } @@ -5693,6 +5746,7 @@ var OSFramework; OSFramework.OSUI.Helper.Dom.Styles.ContainsClass(layoutElemContainer, OSFramework.OSUI.Constants.HasAccessibilityClass); if (this._balloonSearchInputElement !== undefined) { OSUI.Helper.A11Y.TabIndex(this._balloonSearchInputElement, tabIndexValue); + OSUI.Helper.A11Y.AriaHidden(this._balloonSearchInputElement, (tabIndexValue === OSUI.Constants.A11YAttributes.States.TabIndexHidden).toString()); } OSUI.Helper.A11Y.TabIndex(this._balloonOptionsWrapperElement, tabIndexValue); if (this._balloonFocusableElemsInFooter.length > 0) { @@ -5755,7 +5809,7 @@ var OSFramework; } setCallbacks() { this._eventOnBodyClick = this._onBodyClick.bind(this); - this._eventOnBodyScroll = this._onBodyScroll.bind(this); + this._eventOnScreenScroll = this._onScreenScroll.bind(this); this._eventOnClick = this._onSelectValuesWrapperClicked.bind(this); this._eventOnClickInputSearch = this._onSearchInputClicked.bind(this); this._eventOnCloseTransitionEnd = this._endOfCloseAnimation.bind(this); @@ -5787,7 +5841,7 @@ var OSFramework; } unsetCallbacks() { this._eventOnBodyClick = undefined; - this._eventOnBodyScroll = undefined; + this._eventOnScreenScroll = undefined; this._eventOnClick = undefined; this._eventOnClickInputSearch = undefined; this._eventOnCloseTransitionEnd = undefined; @@ -5864,6 +5918,7 @@ var OSFramework; OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSUI.GlobalEnum.HTMLAttributes.Disabled, ''); OSUI.Helper.Dom.Attribute.Set(this._balloonWrapperElement, OSUI.GlobalEnum.HTMLAttributes.Disabled, ''); OSUI.Helper.Dom.Styles.AddClass(this.selfElement, ServerSide.Enum.CssClass.IsDisabled); + OSUI.Helper.A11Y.TabIndexFalse(this._selectValuesWrapper); } dispose() { this._unsetObserver(); @@ -5877,6 +5932,7 @@ var OSFramework; OSUI.Helper.Dom.Attribute.Remove(this.selfElement, OSUI.GlobalEnum.HTMLAttributes.Disabled); OSUI.Helper.Dom.Attribute.Remove(this._balloonWrapperElement, OSUI.GlobalEnum.HTMLAttributes.Disabled); OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, ServerSide.Enum.CssClass.IsDisabled); + OSUI.Helper.A11Y.TabIndexTrue(this._selectValuesWrapper); } getSelectedValues() { return this._hasNoImplementation(); @@ -6895,7 +6951,7 @@ var OSFramework; this._isOpen = this.configs.StartsOpen; } _autoCloseNotification() { - setTimeout(() => { + OSUI.Helper.ApplySetTimeOut(() => { if (this._isOpen) { this.hide(); } @@ -7002,7 +7058,7 @@ var OSFramework; } } setA11YProperties() { - OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.Alert); + OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSUI.Constants.A11YAttributes.Role.AttrName, OSUI.Constants.A11YAttributes.Role.AlertDialog); this._updateA11yProperties(); } setCallbacks() { @@ -7268,6 +7324,14 @@ 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); + event.preventDefault(); + } + } _setBalloonFeature() { this.setBalloonOptions(); this._balloonFeature = new OSFramework.OSUI.Feature.Balloon.Balloon(this, this._balloonElem, this.balloonOptions); @@ -7294,6 +7358,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() { @@ -7308,9 +7373,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() { @@ -7372,10 +7439,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) { @@ -8386,6 +8453,10 @@ 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 = OSUI.Constants.A11YAttributes.States.False; + } this.configs.RatingValue = this._getValue(); this._setValue(true); } @@ -8396,17 +8467,22 @@ 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 = ``; + const input = ``; + let label; + if (!this.configs.IsEdit) { + label = ``; + } + else { + label = ``; + } this._ratingFieldsetElem.innerHTML += input + label; } _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); @@ -8434,9 +8510,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(OSUI.Constants.A11YAttributes.Aria.Hidden); + }); + } + else { + OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Rating_1.Enum.CssClass.IsEdit); + LabelList.forEach((label) => { + label.ariaHidden = OSUI.Constants.A11YAttributes.States.True; + }); + } this._manageRatingEvent(); } _setScale() { @@ -8461,6 +8547,7 @@ var OSFramework; } if (this.configs.RatingScale === 1) { ratingItems[1].checked = true; + ratingItems[1].ariaChecked = OSUI.Constants.A11YAttributes.States.True; return; } let newValue = this._isHalfValue || this._decimalValue > 0.7 @@ -8475,6 +8562,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 = OSUI.Constants.A11YAttributes.States.True; if (this._isHalfValue) { OSUI.Helper.Dom.Styles.AddClass(this.selfElement, Rating_1.Enum.CssClass.IsHalf); } @@ -8581,6 +8669,66 @@ var OSFramework; })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); })(OSFramework || (OSFramework = {})); var OSFramework; +(function (OSFramework) { + var OSUI; + (function (OSUI) { + var Patterns; + (function (Patterns) { + var Search; + (function (Search_1) { + class Search extends Patterns.AbstractPattern { + constructor(uniqueId, configs) { + super(uniqueId, new Search_1.SearchConfig(configs)); + } + setA11YProperties() { + console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented); + } + setCallbacks() { + console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented); + } + setHtmlElements() { + console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented); + } + unsetCallbacks() { + console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented); + } + unsetHtmlElements() { + console.log(OSUI.GlobalEnum.WarningMessages.MethodNotImplemented); + } + build() { + super.build(); + this.finishBuild(); + } + dispose() { + if (this.isBuilt) { + super.dispose(); + } + } + } + Search_1.Search = Search; + })(Search = Patterns.Search || (Patterns.Search = {})); + })(Patterns = OSUI.Patterns || (OSUI.Patterns = {})); + })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); +})(OSFramework || (OSFramework = {})); +var OSFramework; +(function (OSFramework) { + var OSUI; + (function (OSUI) { + var Patterns; + (function (Patterns) { + var Search; + (function (Search) { + class SearchConfig extends Patterns.AbstractConfiguration { + constructor(config) { + super(config); + } + } + Search.SearchConfig = SearchConfig; + })(Search = Patterns.Search || (Patterns.Search = {})); + })(Patterns = OSUI.Patterns || (OSUI.Patterns = {})); + })(OSUI = OSFramework.OSUI || (OSFramework.OSUI = {})); +})(OSFramework || (OSFramework = {})); +var OSFramework; (function (OSFramework) { var OSUI; (function (OSUI) { @@ -8845,17 +8993,6 @@ var OSFramework; top: 0, }; } - _onBodyScroll() { - this._setTargetOffsetInfo(); - const scrollYPosition = OSUI.Behaviors.ScrollVerticalPosition(this._mainScrollContainerElement); - const thresholdVal = 40; - const elementOffsetTopVal = this._targetElementOffset.top - scrollYPosition.value; - if ((this.isFirstChild && scrollYPosition.percentageInView === 0) || - (elementOffsetTopVal >= -thresholdVal && elementOffsetTopVal <= thresholdVal) || - (this.isLastChild && scrollYPosition.percentageInView === 100)) { - this.notifyParent(Patterns.SectionIndex.Enum.ChildNotifyActionType.Active); - } - } _onKeyboardPressed(event) { event.preventDefault(); event.stopPropagation(); @@ -8866,6 +9003,17 @@ var OSFramework; break; } } + _onScreenScroll() { + this._setTargetOffsetInfo(); + const scrollYPosition = OSUI.Behaviors.ScrollVerticalPosition(this._mainScrollContainerElement); + const thresholdVal = 40; + const elementOffsetTopVal = this._targetElementOffset.top - scrollYPosition.value; + if ((this.isFirstChild && scrollYPosition.percentageInView === 0) || + (elementOffsetTopVal >= -thresholdVal && elementOffsetTopVal <= thresholdVal) || + (this.isLastChild && scrollYPosition.percentageInView === 100)) { + this.notifyParent(Patterns.SectionIndex.Enum.ChildNotifyActionType.Active); + } + } _onSelected(event) { event.preventDefault(); event.stopPropagation(); @@ -8875,7 +9023,7 @@ var OSFramework; _removeEvents() { this.selfElement.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick); this.selfElement.removeEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnkeyBoardPress); - OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._eventOnBodyScroll); + OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._eventOnScreenScroll); } _setHeaderSize() { const header = OSUI.Helper.Dom.ClassSelector(document.body, OSUI.GlobalEnum.CssClassElements.Header); @@ -8906,7 +9054,7 @@ var OSFramework; _setUpEvents() { this.selfElement.addEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick); this.selfElement.addEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnkeyBoardPress); - OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._eventOnBodyScroll); + OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._eventOnScreenScroll); } setA11YProperties() { OSUI.Helper.A11Y.RoleButton(this.selfElement); @@ -8915,7 +9063,7 @@ var OSFramework; setCallbacks() { this._eventOnClick = this._onSelected.bind(this); this._eventOnkeyBoardPress = this._onKeyboardPressed.bind(this); - this._eventOnBodyScroll = this._onBodyScroll.bind(this); + this._eventOnScreenScroll = this._onScreenScroll.bind(this); } setHtmlElements() { if (OSUI.Helper.Dom.Attribute.Has(document.body, OSUI.GlobalEnum.HTMLAttributes.StatusBar) && @@ -8930,7 +9078,7 @@ var OSFramework; this._removeEvents(); this._eventOnClick = undefined; this._eventOnkeyBoardPress = undefined; - this._eventOnBodyScroll = undefined; + this._eventOnScreenScroll = undefined; } unsetHtmlElements() { this._mainScrollContainerElement = undefined; @@ -9448,6 +9596,22 @@ var OSFramework; _clickCallback() { this._toggleSubmenu(); } + _handleFocusBehavior() { + const opts = { + focusTargetElement: this._submenuLinksElement, + }; + this._focusTrapInstance = new OSUI.Behaviors.FocusTrap(opts); + this._focusManagerInstance = new OSUI.Behaviors.FocusManager(); + if (this._isOpen === false) { + OSUI.Helper.A11Y.SetElementsTabIndex(false, this._focusTrapInstance.focusableElements); + } + } + _keypressBalloonCallback(e) { + if (e.key === OSUI.GlobalEnum.Keycodes.Escape && this._isOpen) { + this.close(); + this._submenuHeaderElement.focus(); + } + } _keypressCallback(e) { const _clickedElem = e.target; const _closestElem = _clickedElem.closest(OSUI.Constants.Dot + Submenu_1.Enum.CssClass.Pattern); @@ -9455,6 +9619,15 @@ var OSFramework; const _isEnterPressed = e.key === OSUI.GlobalEnum.Keycodes.Enter; const _isTabPressed = e.key === OSUI.GlobalEnum.Keycodes.Tab; const _isShiftPressed = e.shiftKey; + const _isArrowUp = e.key === OSUI.GlobalEnum.Keycodes.ArrowUp; + const _isArrowDown = e.key === OSUI.GlobalEnum.Keycodes.ArrowDown; + const _targetAfterArrow = _isArrowUp ? this._focusTrapInstance.focusableElements.length - 1 : 0; + if (_isArrowDown || _isArrowUp) { + this.open(); + OSUI.Helper.AsyncInvocation(() => { + this._focusTrapInstance.focusableElements[_targetAfterArrow].focus(); + }); + } if (_isEnterPressed) { this._toggleSubmenu(); } @@ -9525,7 +9698,14 @@ var OSFramework; OSUI.Helper.A11Y.AriaExpanded(this._submenuHeaderElement, this._isOpen.toString()); OSUI.Helper.A11Y.AriaHidden(this._submenuLinksElement, (!this._isOpen).toString()); this._submenuAllLinksElement.forEach((item) => { - this._isOpen ? OSUI.Helper.A11Y.TabIndexTrue(item) : OSUI.Helper.A11Y.TabIndexFalse(item); + if (this._isOpen) { + OSUI.Helper.A11Y.TabIndexTrue(item); + OSUI.Helper.A11Y.AriaHiddenFalse(item); + } + else { + OSUI.Helper.A11Y.TabIndexFalse(item); + OSUI.Helper.A11Y.AriaHiddenTrue(item); + } }); } setA11YProperties() { @@ -9541,6 +9721,7 @@ var OSFramework; setCallbacks() { this._eventClick = this._clickCallback.bind(this); this._globalEventBody = this._bodyClickCallback.bind(this); + this._eventBalloonKeypress = this._keypressBalloonCallback.bind(this); this._eventKeypress = this._keypressCallback.bind(this); this._eventOnMouseEnter = this._onMouseEnterCallback.bind(this); this._eventOnMouseLeave = this._onMouseLeaveCallback.bind(this); @@ -9576,6 +9757,7 @@ var OSFramework; } unsetCallbacks() { this._eventClick = undefined; + this._eventBalloonKeypress = undefined; this._eventKeypress = undefined; this._globalEventBody = undefined; this._eventOnMouseEnter = undefined; @@ -9592,6 +9774,7 @@ var OSFramework; super.build(); this.setHtmlElements(); this.setInitialStates(); + this._handleFocusBehavior(); this.setA11YProperties(); this.setCallbacks(); this.finishBuild(); @@ -9607,12 +9790,15 @@ var OSFramework; } close() { if (this._isOpen) { + this._focusTrapInstance.disableForA11y(); if (this.hasClickOutsideToClose) { OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._globalEventBody); } OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Submenu_1.Enum.CssClass.PatternIsOpen); this._isOpen = false; this._updateA11yProperties(); + this._focusManagerInstance.setFocusToStoredElement(); + this._submenuLinksElement.removeEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventBalloonKeypress.bind(this)); this.triggerPlatformEventCallback(this._platformEventOnToggleCallback, false); } } @@ -9623,9 +9809,12 @@ var OSFramework; super.dispose(); } open() { + this._focusTrapInstance.enableForA11y(); + this._focusManagerInstance.storeLastFocusedElement(); if (this.hasClickOutsideToClose) { OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._globalEventBody); } + this._submenuLinksElement.addEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventBalloonKeypress.bind(this)); OSUI.Helper.AsyncInvocation(this._show.bind(this)); this.triggerPlatformEventCallback(this._platformEventOnToggleCallback, true); } @@ -9929,6 +10118,10 @@ var OSFramework; (function (ObserverOptions) { ObserverOptions["RootMargin"] = "1px"; })(ObserverOptions = Enum.ObserverOptions || (Enum.ObserverOptions = {})); + let ElementsBlockingOnChange; + (function (ElementsBlockingOnChange) { + ElementsBlockingOnChange["Dropdown"] = ".pop-comp-active"; + })(ElementsBlockingOnChange = Enum.ElementsBlockingOnChange || (Enum.ElementsBlockingOnChange = {})); let ChildTypes; (function (ChildTypes) { ChildTypes["TabsContentItem"] = "TabsContentItem"; @@ -10064,6 +10257,14 @@ var OSFramework; } this.changeTab(targetHeaderItemIndex, undefined, true); break; + case OSUI.GlobalEnum.Keycodes.End: + targetHeaderItemIndex = this.getChildItems(Tabs_1.Enum.ChildTypes.TabsHeaderItem).length - 1; + this.changeTab(targetHeaderItemIndex, undefined, true); + break; + case OSUI.GlobalEnum.Keycodes.Home: + targetHeaderItemIndex = 0; + this.changeTab(targetHeaderItemIndex, undefined, true); + break; } const targetHeaderItem = this.getChildByIndex(targetHeaderItemIndex, Tabs_1.Enum.ChildTypes.TabsHeaderItem); if (targetHeaderItem) { @@ -10426,7 +10627,8 @@ var OSFramework; } changeTab(tabIndex = this.configs.StartingTab, tabsHeaderItem, triggerEvent = false, triggeredByObserver = false) { if (this._activeTabHeaderElement === tabsHeaderItem || - (tabIndex === this.configs.StartingTab && this.isBuilt && tabsHeaderItem === undefined)) { + (tabIndex === this.configs.StartingTab && this.isBuilt && tabsHeaderItem === undefined) || + this._activeTabContentElement.selfElement.querySelector(Tabs_1.Enum.ElementsBlockingOnChange.Dropdown)) { return; } let newTabIndex; @@ -10664,6 +10866,9 @@ var OSFramework; setA11YProperties(isUpdate = true) { if (isUpdate === false) { OSUI.Helper.A11Y.RoleTab(this.selfElement); + if (OSUI.Helper.DeviceInfo.IsIos || OSUI.Helper.DeviceInfo.GetOperatingSystem() === OSUI.GlobalEnum.MobileOS.MacOS) { + OSUI.Helper.A11Y.RolePresentation(this.selfElement.parentElement); + } } if (this._isActive) { OSUI.Helper.A11Y.TabIndexTrue(this.selfElement); @@ -11007,22 +11212,6 @@ var OSFramework; } } } - _onBodyScroll() { - if (this.isBuilt) { - if (this._isOpen && OSUI.Helper.DeviceInfo.IsDesktop === false) { - cancelAnimationFrame(this._requestAnimationOnBodyScroll); - this._triggerClose(); - return; - } - if (this._isOpen) { - this._setBalloonCoordinates(); - this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnBodyScroll); - } - else { - cancelAnimationFrame(this._requestAnimationOnBodyScroll); - } - } - } _onClick(e) { e.stopPropagation(); this._triggerOpen(); @@ -11048,6 +11237,22 @@ var OSFramework; this._tooltipBalloonContentElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.TransitionEnd, this._eventOnOpenedBalloon); OSUI.Helper.Dom.Styles.RemoveClass(this._tooltipBalloonWrapperElem, Tooltip_1.Enum.CssClass.BalloonIsOpening); } + _onScreenScroll() { + if (this.isBuilt) { + if (this._isOpen && OSUI.Helper.DeviceInfo.IsDesktop === false) { + cancelAnimationFrame(this._requestAnimationOnBodyScroll); + this._triggerClose(); + return; + } + if (this._isOpen) { + this._setBalloonCoordinates(); + this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnScreenScroll); + } + else { + cancelAnimationFrame(this._requestAnimationOnBodyScroll); + } + } + } _onWindowResize() { this._setBalloonCoordinates(); if (this._isOpen) { @@ -11057,6 +11262,15 @@ var OSFramework; cancelAnimationFrame(this._requestAnimationOnWindowResize); } } + _onkeypressCallback(e) { + const isEscapedPressed = e.key === OSUI.GlobalEnum.Keycodes.Escape; + if (this._isOpen) { + if (isEscapedPressed) { + this.close(); + } + } + e.stopPropagation(); + } _setBalloonCoordinates() { const selfElement = this.selfElement.getBoundingClientRect(); if (selfElement.x === this._selfElementBoundingClientRect.x && @@ -11126,9 +11340,10 @@ var OSFramework; if (OSUI.Helper.DeviceInfo.HasAccessibilityEnabled) { this._tooltipIconElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.Blur, this._eventOnBlur); this._tooltipIconElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.Focus, this._eventOnFocus); + this._tooltipIconElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnKeypress); } - OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._eventOnBodyScroll); - this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnBodyScroll); + OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._eventOnScreenScroll); + this._requestAnimationOnBodyScroll = requestAnimationFrame(this._eventOnScreenScroll); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSUI.Event.DOMEvents.Listeners.Type.WindowResize, this._eventOnWindowResize); this._requestAnimationOnWindowResize = requestAnimationFrame(this._eventOnWindowResize); if (this._isOpen) { @@ -11150,7 +11365,6 @@ var OSFramework; this._isOpen = false; OSUI.Helper.Dom.Styles.RemoveClass(this.selfElement, Tooltip_1.Enum.CssClass.IsOpened); OSUI.Helper.Dom.Styles.RemoveClass(this._tooltipBalloonWrapperElem, Tooltip_1.Enum.CssClass.BalloonIsOpened); - OSUI.Helper.A11Y.AriaHiddenTrue(this._tooltipBalloonWrapperElem); this._unsetObserver(); if (this._tooltipBalloonPositionClass !== this.configs.Position) { OSUI.Helper.Dom.Styles.RemoveClass(this._tooltipBalloonWrapperElem, this._tooltipBalloonPositionClass); @@ -11172,7 +11386,6 @@ var OSFramework; this._unsetObserver(); this._setBalloonCoordinates(); this._setBalloonPosition(false, this._tooltipBalloonContentElem.getBoundingClientRect()); - OSUI.Helper.A11Y.AriaHiddenFalse(this._tooltipBalloonWrapperElem); OSUI.Helper.AsyncInvocation(() => { OSUI.Helper.Dom.Styles.AddClass(this._tooltipBalloonWrapperElem, Tooltip_1.Enum.CssClass.BalloonIsOpening); this._tooltipBalloonContentElem.addEventListener(OSUI.GlobalEnum.HTMLEvent.TransitionEnd, this._eventOnOpenedBalloon); @@ -11191,9 +11404,10 @@ var OSFramework; this._tooltipIconElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnClick); this._tooltipIconElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Blur, this._eventOnBlur); this._tooltipIconElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Focus, this._eventOnFocus); + this._tooltipIconElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.keyDown, this._eventOnKeypress); this._tooltipBalloonContentElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.Click, this._eventOnBalloonClick); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnClick, this._eventOnBodyClick); - OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._eventOnBodyScroll); + OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._eventOnScreenScroll); OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSUI.Event.DOMEvents.Listeners.Type.WindowResize, this._eventOnWindowResize); this._tooltipBalloonContentElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.TransitionEnd, this._eventOnOpenedBalloon); this._tooltipIconElem.removeEventListener(OSUI.GlobalEnum.HTMLEvent.MouseEnter, this._eventIconOnMouseEnter); @@ -11230,21 +11444,21 @@ var OSFramework; } } setA11YProperties() { - OSUI.Helper.A11Y.RoleTooltip(this._tooltipIconElem); - OSUI.Helper.A11Y.AriaLabel(this._tooltipIconElem, Tooltip_1.Enum.AriaLabelText.Content); - OSUI.Helper.A11Y.TabIndexTrue(this._tooltipIconElem); - OSUI.Helper.A11Y.AriaDescribedBy(this._tooltipIconElem, this._tooltipBalloonWrapperElem.id); - OSUI.Helper.A11Y.AriaLabelledBy(this._tooltipIconElem, this._tooltipBalloonWrapperElem.id); + OSUI.Helper.A11Y.RoleButton(this._tooltipIconElem); + OSUI.Helper.A11Y.RoleTooltip(this._tooltipBalloonWrapperElem); + OSUI.Helper.A11Y.AriaDescribedBy(this._tooltipIconElem, this._tooltipBalloonContentElem.id); OSUI.Helper.A11Y.AriaHiddenTrue(this._tooltipBalloonWrapperElem); + OSUI.Helper.A11Y.TabIndexTrue(this._tooltipIconElem); } setCallbacks() { this._eventOnBalloonClick = this._onBalloonClick.bind(this); this._eventOnBlur = this._onBlur.bind(this); this._eventOnBodyClick = this._onBodyClick.bind(this); - this._eventOnBodyScroll = this._onBodyScroll.bind(this); + this._eventOnScreenScroll = this._onScreenScroll.bind(this); this._eventOnClick = this._onClick.bind(this); this._eventOnFocus = this._onFocus.bind(this); this._eventOnOpenedBalloon = this._onOpenedBalloon.bind(this); + this._eventOnKeypress = this._onkeypressCallback.bind(this); this._eventOnWindowResize = this._onWindowResize.bind(this); this._eventBalloonWrapperOnMouseEnter = this._onBalloonWrapperMouseEnter.bind(this); this._eventBalloonWrapperOnMouseLeave = this._onBalloonWrapperMouseLeave.bind(this); @@ -11271,10 +11485,11 @@ var OSFramework; this._eventOnBalloonClick = undefined; this._eventOnBlur = undefined; this._eventOnBodyClick = undefined; - this._eventOnBodyScroll = undefined; + this._eventOnScreenScroll = undefined; this._eventOnClick = undefined; this._eventOnFocus = undefined; this._eventOnOpenedBalloon = undefined; + this._eventOnKeypress = undefined; this._eventOnWindowResize = undefined; this._eventBalloonWrapperOnMouseEnter = undefined; this._eventBalloonWrapperOnMouseLeave = undefined; @@ -12107,10 +12322,8 @@ var OutSystems; }; ErrorCodes.Search = { FailChangeProperty: 'OSUI-API-20001', - FailClose: 'OSUI-API-20002', - FailDispose: 'OSUI-API-20003', - FailOpen: 'OSUI-API-20004', - FailRegisterCallback: 'OSUI-API-20005', + FailDispose: 'OSUI-API-20002', + FailRegisterCallback: 'OSUI-API-20003', }; ErrorCodes.SectionIndexItem = { FailChangeProperty: 'OSUI-API-21001', @@ -14370,6 +14583,76 @@ var OutSystems; })(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {})); })(OutSystems || (OutSystems = {})); var OutSystems; +(function (OutSystems) { + var OSUI; + (function (OSUI) { + var Patterns; + (function (Patterns) { + var SearchAPI; + (function (SearchAPI) { + const _searchMap = new Map(); + function ChangeProperty(searchId, propertyName, propertyValue) { + const result = OutSystems.OSUI.Utils.CreateApiResponse({ + errorCode: OSUI.ErrorCodes.Search.FailChangeProperty, + callback: () => { + const search = GetSearchById(searchId); + search.changeProperty(propertyName, propertyValue); + }, + }); + return result; + } + SearchAPI.ChangeProperty = ChangeProperty; + function Create(searchId, configs) { + if (_searchMap.has(searchId)) { + throw new Error(`There is already a ${OSFramework.OSUI.GlobalEnum.PatternName.Search} registered under id: ${searchId}`); + } + const _newSearch = new OSFramework.OSUI.Patterns.Search.Search(searchId, JSON.parse(configs)); + _searchMap.set(searchId, _newSearch); + return _newSearch; + } + SearchAPI.Create = Create; + function Dispose(searchId) { + const result = OutSystems.OSUI.Utils.CreateApiResponse({ + errorCode: OSUI.ErrorCodes.Search.FailDispose, + callback: () => { + const search = GetSearchById(searchId); + search.dispose(); + _searchMap.delete(searchId); + }, + }); + return result; + } + SearchAPI.Dispose = Dispose; + function GetAllSearches() { + return OSFramework.OSUI.Helper.MapOperation.ExportKeys(_searchMap); + } + SearchAPI.GetAllSearches = GetAllSearches; + function GetSearchById(searchId) { + return OSFramework.OSUI.Helper.MapOperation.FindInMap('Search', searchId, _searchMap); + } + SearchAPI.GetSearchById = GetSearchById; + function Initialize(searchId) { + const search = GetSearchById(searchId); + search.build(); + return search; + } + SearchAPI.Initialize = Initialize; + function RegisterCallback(searchId, eventName, callback) { + const result = OutSystems.OSUI.Utils.CreateApiResponse({ + errorCode: OSUI.ErrorCodes.Search.FailRegisterCallback, + callback: () => { + const _SearchItem = this.GetSearchById(searchId); + _SearchItem.registerCallback(eventName, callback); + }, + }); + return result; + } + SearchAPI.RegisterCallback = RegisterCallback; + })(SearchAPI = Patterns.SearchAPI || (Patterns.SearchAPI = {})); + })(Patterns = OSUI.Patterns || (OSUI.Patterns = {})); + })(OSUI = OutSystems.OSUI || (OutSystems.OSUI = {})); +})(OutSystems || (OutSystems = {})); +var OutSystems; (function (OutSystems) { var OSUI; (function (OSUI) { @@ -16320,6 +16603,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) { @@ -17550,19 +17858,39 @@ var Providers; _setParentMinHeight() { OSFramework.OSUI.Helper.Dom.Styles.SetStyleAttribute(this.selfElement, OSFramework.OSUI.GlobalEnum.InlineStyle.Height, this.selfElement.clientHeight + OSFramework.OSUI.GlobalEnum.Units.Pixel); } + _todayButtonKeydown(e) { + switch (e.key) { + case OSFramework.OSUI.GlobalEnum.Keycodes.Tab: + return; + case OSFramework.OSUI.GlobalEnum.Keycodes.Enter: + case OSFramework.OSUI.GlobalEnum.Keycodes.Space: + e.preventDefault(); + this.provider.setDate(this.provider.now, true); + this.jumpIntoToday(); + break; + } + } _unsetParentMinHeight() { OSFramework.OSUI.Helper.Dom.Styles.RemoveStyleAttribute(this.selfElement, OSFramework.OSUI.GlobalEnum.InlineStyle.Height); } addTodayBtn() { - const todayBtnWrapper = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Div); - todayBtnWrapper.classList.add(Flatpickr.Enum.CssClasses.TodayBtn); + this._todayButtonElem = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Div); + this._todayButtonElem.classList.add(Flatpickr.Enum.CssClasses.TodayBtn); const todayBtn = document.createElement(OSFramework.OSUI.GlobalEnum.HTMLElement.Link); + OSFramework.OSUI.Helper.A11Y.TabIndexTrue(todayBtn); const langCode = Flatpickr.l10ns.TodayBtn[this.configs.Lang] !== undefined ? this.configs.Lang : 'en'; todayBtn.innerHTML = Flatpickr.l10ns.TodayBtn[langCode].title; OSFramework.OSUI.Helper.A11Y.AriaLabel(todayBtn, Flatpickr.l10ns.TodayBtn[langCode].ariaLabel); todayBtn.addEventListener(OSFramework.OSUI.GlobalEnum.HTMLEvent.Click, this.todayBtnClick.bind(this)); - todayBtnWrapper.appendChild(todayBtn); - this.provider.calendarContainer.appendChild(todayBtnWrapper); + todayBtn.addEventListener(OSFramework.OSUI.GlobalEnum.HTMLEvent.keyDown, this._todayButtonKeydown.bind(this)); + this._todayButtonElem.appendChild(todayBtn); + this._providerFocusSpanTarget = this.provider.calendarContainer.querySelector('.focus-trap-bottom-element'); + if (this._providerFocusSpanTarget) { + this.provider.calendarContainer.insertBefore(this._todayButtonElem, this._providerFocusSpanTarget); + } + else { + this.provider.calendarContainer.appendChild(this._todayButtonElem); + } } createProviderInstance() { this.provider = window.flatpickr(this.datePickerPlatformInputElem, this.flatpickrOpts); @@ -17614,7 +17942,8 @@ var Providers; ariaLabelValue = this.datePickerPlatformInputElem.getAttribute(OSFramework.OSUI.Constants.A11YAttributes.Aria.Label); } OSFramework.OSUI.Helper.A11Y.AriaLabel(this.flatpickrInputElem, ariaLabelValue); - OSFramework.OSUI.Helper.A11Y.AriaDescribedBy(this.flatpickrInputElem, this._a11yInfoContainerElem.id); + if (OSFramework.OSUI.Helper.DeviceInfo.IsDesktop) + OSFramework.OSUI.Helper.A11Y.AriaDescribedBy(this.flatpickrInputElem, this._a11yInfoContainerElem.id); if (this.configs.Lang !== OSFramework.OSUI.Constants.Language.short) { this._a11yInfoContainerElem.innerHTML = Datepicker.Flatpickr.l10ns.A11yContainerInfo[this.configs.Lang] !== undefined @@ -17673,6 +18002,9 @@ var Providers; close() { if (this.provider.isOpen) { this.provider.close(); + if (this.configs.ShowTodayButton) { + OSFramework.OSUI.Helper.A11Y.TabIndexFalse(this._todayButtonElem); + } } } disableDays(disableDays) { @@ -17699,6 +18031,12 @@ var Providers; const isInputDisable = this.datePickerPlatformInputElem.disabled; if (this.provider.isOpen === false && isInputDisable === false) { this.provider.open(); + if (this.flatpickrInputElem) { + this.flatpickrInputElem.focus(); + } + if (this.configs.ShowTodayButton) { + OSFramework.OSUI.Helper.A11Y.TabIndexTrue(this._todayButtonElem); + } } } registerCallback(eventName, callback) { @@ -18284,199 +18622,199 @@ var Providers; (function (l10ns) { l10ns.A11yContainerInfo = { ar: { - htmlTex: 'من أجل أن تكون قادرًا على التنقل من خلال التقويم باستخدام مفتاح لوحة المفاتيح: استخدم مفتاح السهم CMD أو CTRL + لأسفل للتنقل إلى سياق التقويم ؛ استخدم مفاتيح الأسهم للتنقل خلال أيام التقويم ؛ استخدم مفاتيح السهم CMD أو CTRL + اليمين أو اليسرى للتنقل عبر أشهر ؛ استخدم مفاتيح الأسهم CMD أو CTRL + لأعلى أو لأسفل للتنقل عبر سنوات ؛', + htmlTex: 'استخدم مفتاح السهم للأسفل لفتح التقويم؛ استخدم مفاتيح الأسهم للتنقل في أيام التقويم؛ استخدم مفتاح Ctrl أو Cmd + الأسهم اليمين أو اليسار للتنقل بين الشهور؛ استخدم مفتاح Ctrl أو Cmd + الأسهم للأعلى أو للأسفل للتنقل بين السنوات؛', }, at: { - htmlTex: 'Um mit Tastaturschlüssel durch den Kalender navigieren zu können: Verwenden Sie CMD oder Strg + Down -Pfeil -Taste, um in den Kalenderkontext zu navigieren; Verwenden Sie Pfeilschlüssel, um durch Kalendertage zu navigieren. Verwenden Sie CMD- oder Strg + rechts oder linke Pfeiltasten, um Monate zu navigieren. Verwenden Sie CMD oder Strg + Up- oder Down -Pfeiltasten, um durch Jahre zu navigieren.', + htmlTex: 'Verwenden Sie die Pfeiltaste nach unten, um den Kalender zu öffnen; Verwenden Sie die Pfeiltasten, um sich durch die Kalendertage zu bewegen; Verwenden Sie die Strg- oder Cmd-Taste + die rechte oder linke Pfeiltaste, um sich durch die Monate zu bewegen; Verwenden Sie die Strg- oder Cmd-Taste + die Pfeiltasten nach oben oder unten, um sich durch die Jahre zu bewegen;', }, az: { - htmlTex: 'Klaviatura düyməsi ilə təqvimlə naviqasiya etmək üçün: Təqvim kontekstinə keçmək üçün CMD və ya CTRL + Down Ok düyməsinə istifadə edin; Təqvim günlərində gəzmək üçün ox düymələrindən istifadə edin; Aylarla gəzmək üçün CMD və ya CTRL + sağ və ya sol ox düymələrindən istifadə edin; İllərlə gəzmək üçün CMD və ya CTRL + yuxarı və ya aşağı ox düymələrindən istifadə edin;', + htmlTex: 'Təqvim açmaq üçün aşağı ox düyməsindən istifadə edin; Təqvim gününü gəzmək üçün aşağı və ya yuxarı ox düymələrindən istifadə edin; Aylar arasında gəzmək üçün Ctrl və ya Cmd + sağ və ya sol ox düymələrindən istifadə edin; İllər arasında gəzmək üçün Ctrl və ya Cmd + yuxarı və ya aşağı ox düymələrindən istifadə edin;', }, be: { - htmlTex: 'Для таго, каб мець магчымасць перамяшчацца па календары з клавішнай клавішай: Выкарыстоўвайце CMD або CTRL + клавіша са стрэлкай уніз, каб перайсці ў каляндарны кантэкст; Выкарыстоўвайце клавішы са стрэлкамі для навігацыі праз каляндарныя дні; Выкарыстоўвайце CMD або CTRL + правай або левай клавішы са стрэлкамі для навігацыі праз месяцы; Выкарыстоўвайце CMD або CTRL + клавішы са стрэлкамі ўверх ці ўніз, каб перамяшчацца праз гады;', + htmlTex: 'Выкарыстоўвайце клавішу стрэлкі ўніз, каб адкрыць каляндар; Выкарыстоўвайце стрэлкі для навігацыі па днях каляндара; Выкарыстоўвайце клавішу Ctrl або Cmd + стрэлкі ўправа або ўлева для навігацыі па месяцах; Выкарыстоўвайце клавішу Ctrl або Cmd + стрэлкі ўверх або ўніз для навігацыі па гадах;', }, bg: { - htmlTex: 'За да можете да навигирате през календара с клавиатура: използвайте CMD или Ctrl + Key Arrow Key, за да придвижите в контекста на календара; Използвайте клавишите със стрелки, за да се движите през календарни дни; Използвайте CMD или Ctrl + десни или леви клавиши със стрелки, за да се движите през месеци; Използвайте CMD или CTRL + нагоре или надолу клавиши със стрелки, за да навигирате през години;', + htmlTex: 'Използвайте клавиша със стрелка надолу, за да отворите календара; Използвайте стрелките за да навигирате през дните в календара; Използвайте Ctrl или Cmd + стрелка надясно или наляво, за да навигирате през месеците; Използвайте Ctrl или Cmd + стрелка нагоре или надолу, за да навигирате през годините;', }, bn: { - htmlTex: 'কীবোর্ড কী দিয়ে ক্যালেন্ডারের মাধ্যমে নেভিগেট করতে সক্ষম হওয়ার জন্য: ক্যালেন্ডার প্রসঙ্গে নেভিগেট করতে সিএমডি বা সিটিআরএল + ডাউন তীর কী ব্যবহার করুন; ক্যালেন্ডারের দিনগুলিতে নেভিগেট করতে তীর কী ব্যবহার করুন; কয়েক মাস ধরে নেভিগেট করতে সিএমডি বা সিটিআরএল + ডান বা বাম তীর কী ব্যবহার করুন; বছরের মধ্যে নেভিগেট করতে সিএমডি বা সিটিআরএল + উপরে বা ডাউন তীর কী ব্যবহার করুন;', + htmlTex: 'ক্যালেন্ডার খোলার জন্য ডাউন অ্যারো কি ব্যবহার করুন; ক্যালেন্ডারের দিনগুলি নেভিগেট করতে এরো কি ব্যবহার করুন; মাসের মধ্যে নেভিগেট করতে Ctrl বা Cmd + ডান বা বাম অ্যারো কি ব্যবহার করুন; বছরের মধ্যে নেভিগেট করতে Ctrl বা Cmd + উপর বা নিচে অ্যারো কি ব্যবহার করুন;', }, bs: { - htmlTex: 'Da biste mogli kretati kroz kalendar s tipkovnicom tipkovnicom: Koristite CMD ili Ctrl + tipku sa strelicom dolje za kretanje u kontekst kalendara; Koristite tipke sa strelicama za navigaciju kroz dane kalendara; Koristite CMD ili CTRL + tastere sa strelicom ili lijeve strelice za kretanje kroz mjesece; Upotrijebite CMD ili Ctrl + gore ili dolje tipke sa strelicama za navigaciju kroz godine;', + htmlTex: 'Koristite strelicu prema dolje za otvaranje kalendara; Koristite strelice za navigaciju kroz dane u kalendaru; Koristite Ctrl ili Cmd + desnu ili lijevu strelicu za navigaciju kroz mjesece; Koristite Ctrl ili Cmd + strelicu prema gore ili prema dolje za navigaciju kroz godine;', }, ca: { - htmlTex: 'Per poder navegar pel calendari amb tecla de teclat: utilitzeu la tecla CMD o CTRL + Down Arrow per navegar cap al context del calendari; Utilitzeu les tecles de fletxa per navegar durant els dies naturals; Utilitzeu les tecles de fletxa CMD o CTRL + dreta o esquerra per navegar durant mesos; Utilitzeu les tecles de fletxa CMD o Ctrl + amunt o avall per navegar durant anys;', + htmlTex: 'Utilitzeu la tecla de la fletxa cap avall per obrir el calendari; Utilitzeu les fletxes per navegar pels dies del calendari; Utilitzeu Ctrl o Cmd + la fletxa de dreta o esquerra per navegar pels mesos; Utilitzeu Ctrl o Cmd + la fletxa cap amunt o cap avall per navegar pels anys;', }, cat: { - htmlTex: 'Per poder navegar pel calendari amb tecla de teclat: utilitzeu la tecla CMD o CTRL + Down Arrow per navegar cap al context del calendari; Utilitzeu les tecles de fletxa per navegar durant els dies naturals; Utilitzeu les tecles de fletxa CMD o CTRL + dreta o esquerra per navegar durant mesos; Utilitzeu les tecles de fletxa CMD o Ctrl + amunt o avall per navegar durant anys;', + htmlTex: 'Utilitzeu la tecla de la fletxa cap avall per obrir el calendari; Utilitzeu les tecles de la fletxa per navegar pels dies del calendari; Utilitzeu cmd o ctrl + tecla de la fletxa dreta o esquerra per navegar pels mesos; Utilitzeu cmd o ctrl + tecla de la fletxa cap amunt o cap avall per navegar pels anys;', }, ckb: { - htmlTex: 'Ji bo ku bikaribin bi kalîfar bi klavyeyê bi klavyeyê vegerin: Bişkojka CMD an CTRL + Down-ê bikar bînin da ku nav çarçoveya salnameyê veguhezînin; Bişkojkên arrow bikar bînin ku bi rojên salnameyê vegerin. Bişkojkên CMD an CTRL + rast an çepê bikar bînin da ku bi mehan rêve bibin; Bişkojkên CMD an CTRL + UP an Down bikar bînin da ku bi salan navigirin;', + htmlTex: 'ئەم توندوتان بەکاربهێنە بۆ کردنەوەی ڕۆژنامە; توندوتانی تیر بۆ ناوی ڕۆژەکانی ڕۆژنامە بکەن; دوگمەی cmd یان ctrl + توندوی ئەستوو یان چەپ بۆ ناوی مانگەکان بکەن; دوگمەی cmd یان ctrl + توندوی سەرەوە یان خوار بۆ ناوی ساڵەکان بکەن;', }, cs: { - htmlTex: 'Chcete -li být schopen procházet kalendářem pomocí klávesnice klávesnice: Použijte CMD nebo Ctrl + Down Arrow Key pro navigaci do kontextu kalendáře; Použijte klíče se šipkami pro navigaci v kalendářních dnech; Pro navigaci v měsících použijte klíče CMD nebo CTRL + vpravo nebo vlevo; Pro navigaci po létech použijte klávesy se šipkami CMD nebo CTRL + nahoru nebo dolů;', + htmlTex: 'Použijte klávesu šipka dolů k otevření kalendáře; Použijte šipky k navigaci mezi dny v kalendáři; Použijte klávesu Ctrl nebo Cmd + šipky vpravo nebo vlevo k navigaci mezi měsíci; Použijte klávesu Ctrl nebo Cmd + šipky nahoru nebo dolů k navigaci mezi roky;', }, cy: { - htmlTex: "Er mwyn gallu llywio trwy'r calendr gydag allwedd bysellfwrdd: defnyddiwch allwedd saeth CMD neu CTRL + Down i lywio i gyd -destun calendr; Defnyddio allweddi saeth i lywio trwy ddiwrnodau calendr; Defnyddio allweddi saeth CMD neu Ctrl + dde neu chwith i lywio trwy fisoedd; Defnyddiwch allweddi saeth CMD neu CTRL + i fyny neu i lawr i lywio trwy flynyddoedd;", + htmlTex: 'Defnyddiwch y botwm saeth i lawr i agor y calendr; Defnyddiwch y bysellau i lywio drwy ddyddiau calendr; Defnyddiwch Ctrl neu Cmd + y bysellau de neu lafur i lywio drwy fisoedd; Defnyddiwch Ctrl neu Cmd + y bysellau i fyny neu i lawr i lywio drwy flynyddoedd;', }, da: { - htmlTex: 'For at kunne navigere gennem kalender med tastaturnøgle: Brug CMD eller Ctrl + Down Arrow -tasten til at navigere i kalenderkontekst; Brug piletaster til at navigere gennem kalenderdage; Brug CMD eller CTRL + højre eller venstre piletaster til at navigere gennem måneder; Brug CMD eller CTRL + op eller ned på piletasterne til at navigere gennem år;', + htmlTex: 'Brug pil ned for at åbne kalenderen; Brug piletasterne til at navigere gennem kalenderens dage; Brug Ctrl eller Cmd + højre eller venstre pil for at navigere gennem månederne; Brug Ctrl eller Cmd + op eller ned pilene for at navigere gennem årene;', }, de: { - htmlTex: 'Um mit Tastaturschlüssel durch den Kalender navigieren zu können: Verwenden Sie CMD oder Strg + Down -Pfeil -Taste, um in den Kalenderkontext zu navigieren; Verwenden Sie Pfeilschlüssel, um durch Kalendertage zu navigieren. Verwenden Sie CMD- oder Strg + rechts oder linke Pfeiltasten, um Monate zu navigieren. Verwenden Sie CMD oder Strg + Up- oder Down -Pfeiltasten, um durch Jahre zu navigieren.', + htmlTex: 'Verwenden Sie die Pfeiltaste nach unten, um den Kalender zu öffnen; Verwenden Sie die Pfeiltasten, um durch die Kalendertage zu navigieren; Verwenden Sie die Befehlstaste oder Strg + Pfeiltaste rechts oder links, um durch die Monate zu navigieren; Verwenden Sie die Befehlstaste oder Strg + Pfeiltaste nach oben oder unten, um durch die Jahre zu navigieren;', }, en: { - htmlTex: 'In order to be able to navigate through calendar with keyboard key: Use cmd or ctrl + down arrow key to navigate into calendar context; Use arrow keys to navigate through calendar days; Use cmd or ctrl + right or left arrow keys to navigate through months; Use cmd or ctrl + up or down arrow keys to navigate through years;', + htmlTex: 'Use arrow down key to open the calendar; Use arrow keys to navigate through calendar days; Use cmd or ctrl + right or left arrow keys to navigate through months; Use cmd or ctrl + up or down arrow keys to navigate through years;', }, eo: { - htmlTex: 'Por povi navigi tra kalendaro per klavara ŝlosilo: Uzu CMD aŭ CTRL + malsupren sagoklavon por navigi en kalendaran kuntekston; Uzu sagajn ŝlosilojn por navigi tra kalendaraj tagoj; Uzu CMD aŭ CTRL + dekstran aŭ maldekstran sagoklavojn por navigi tra monatoj; Uzu CMD aŭ CTRL + supren aŭ malsupren sagoklavojn por navigi tra jaroj;', + htmlTex: 'Uzu la malsupran sago-butonon por malfermi la kalendaron; Uzu sago-butonojn por navigi tra kalendaraj tagoj; Uzu cmd aŭ ctrl + dekstren aŭ maldekstren sago-butonojn por navigi tra monatoj; Uzu cmd aŭ ctrl + supren aŭ malsupren sago-butonojn por navigi tra jaroj;', }, es: { - htmlTex: 'Para poder navegar a través del calendario con la tecla de teclado: use la tecla CMD o CTRL + Down Arrow para navegar hacia el contexto del calendario; Use las teclas de flecha para navegar a través de los días calendario; Use las teclas CMD o CTRL + Derecha o Left Flecha para navegar durante meses; Use CMD o Ctrl + Arrow Keys para navegar a través de años;', + htmlTex: 'Utiliza la tecla de flecha hacia abajo para abrir el calendario; Utiliza las teclas de flecha para navegar por los días del calendario; Utiliza cmd o ctrl + teclas de flecha derecha o izquierda para navegar por los meses; Utiliza cmd o ctrl + teclas de flecha arriba o abajo para navegar por los años;', }, et: { - htmlTex: 'Klaviatuuri klahviga kalendris liikumiseks: kasutage kalendri konteksti navigeerimiseks CMD või CTRL + Down Noole klahvi; Kasutage kalendripäevade liikumiseks nooleklahve; Kasutage kuude jooksul navigeerimiseks CMD või Ctrl + paremat või vasakut nooleklahvi; Kasutage aastate jooksul navigeerimiseks CMD või Ctrl + üles või alla nooleklahve;', + htmlTex: 'Kasutage allanoolt, et avada kalender; Kasutage nooleklahve kalendripäevade sirvimiseks; Kasutage käsku või ctrl + parema või vasaku nooleklahvi, et sirvida kuude vahel; Kasutage käsku või ctrl + üles või alla nooleklahvi, et sirvida aastate vahel;', }, fa: { - htmlTex: 'برای اینکه بتوانید از طریق تقویم با کلید صفحه کلید حرکت کنید: از کلید Arrow CMD یا Ctrl + Down برای حرکت در متن تقویم استفاده کنید. از کلیدهای فلش برای حرکت در روزهای تقویم استفاده کنید. برای حرکت در طی ماهها از کلیدهای پیکان راست یا CTRL + راست یا چپ استفاده کنید. برای حرکت در طی سالها از کلیدهای Arrow CMD یا CTRL + بالا یا پایین استفاده کنید.', + htmlTex: 'از کلید پایین فشار دهید تا تقویم باز شود؛ از کلید‌های پایین برای ناوبری در ایام تقویم استفاده کنید؛ از کلیدهای cmd یا ctrl + راست یا چپ برای ناوبری در ماه‌ها استفاده کنید؛ از کلیدهای cmd یا ctrl + پایین یا بالا برای ناوبری در سال‌ها استفاده کنید؛', }, fi: { - htmlTex: 'Kalenterin avulla näppäimistön näppäimellä voi kulkea CMD- tai CTRL + Down -nuolinäppäimellä kalenterikontekstissa; Käytä nuolinäppäimiä kalenteripäivinä; Käytä CMD: tä tai Ctrl +: ta oikealla tai vasemmalla nuolinäppäimellä nähdäksesi kuukausia; Käytä CMD: tä tai Ctrl + ylös tai alas nuolinäppäimiä navigoidaksesi vuosien ajan;', + htmlTex: 'Käytä nuolinäppäintä alentaaksesi kalenterin; Käytä nuolinäppäimiä navigoidaksesi kalenterin päivien läpi; Käytä cmd- tai ctrl-näppäintä ja nuolinäppäimiä oikealle tai vasemmalle navigoidaksesi kuukausien läpi; Käytä cmd- tai ctrl-näppäintä ja nuolinäppäimiä ylös tai alas navigoidaksesi vuosien läpi;', }, fo: { - htmlTex: 'Um mit Tastaturschlüssel durch den Kalender navigieren zu können: Verwenden Sie CMD oder Strg + Down -Pfeil -Taste, um in den Kalenderkontext zu navigieren; Verwenden Sie Pfeilschlüssel, um durch Kalendertage zu navigieren. Verwenden Sie CMD- oder Strg + rechts oder linke Pfeiltasten, um Monate zu navigieren. Verwenden Sie CMD oder Strg + Up- oder Down -Pfeiltasten, um durch Jahre zu navigieren.', + htmlTex: 'Brúk niður píl til at opna kalendara; Brúk niður pílar til at navigera ímillum kalenderdagar; Brúk cmd ella ctrl + høgri ella vinstri niður pílar til at navigera ímillum mánaðir; Brúk cmd ella ctrl + upp ella niður pílar til at navigera ímillum ár;', }, fr: { - htmlTex: 'Afin de pouvoir naviguer dans le calendrier avec la clé du clavier: utilisez CMD ou Ctrl + Down Arrow Key pour naviguer dans le contexte du calendrier; Utilisez des clés Arrow pour naviguer dans les jours civils; Utilisez CMD ou CTRL + les clés de flèche droite ou gauche pour naviguer dans des mois; Utilisez des clés CMD ou CTRL + UP ou Down pour naviguer dans des années;', + htmlTex: 'Utilisez la touche flèche vers le bas pour ouvrir le calendrier ; Utilisez les touches flèches pour naviguer à travers les jours du calendrier ; Utilisez la touche cmd ou ctrl + flèche droite ou gauche pour naviguer à travers les mois ; Utilisez la touche cmd ou ctrl + flèche vers le haut ou vers le bas pour naviguer à travers les années ;', }, ga: { - htmlTex: "D'fhonn a bheith in ann nascleanúint a dhéanamh trí fhéilire le heochair mhéarchláir: Úsáid eochair CMD nó Ctrl + Down saighead chun dul isteach i gcomhthéacs féilire; Bain úsáid as eochracha saighead chun nascleanúint a dhéanamh trí laethanta féilire; Bain úsáid as CMD nó Ctrl + eochracha saighead ar dheis nó ar chlé chun nascleanúint a dhéanamh trí mhí; Bain úsáid as eochracha CMD nó Ctrl + suas nó síos saighead le nascleanúint a dhéanamh trí bhlianta;", + htmlTex: 'Úsáid an gcnaipe síos freisin chun an féilire a oscailt; Úsáid na siorafí siar chun bealach a aimsiú trí laethanta na féilire; Úsáid an cmd nó an cnaipe ctrl + saigheada ar dheis nó ar chlé chun aistriú trí mhíonna; Úsáid an cmd nó an cnaipe ctrl + saigheada suas nó síos chun aistriú trí blianta;', }, gr: { - htmlTex: 'Προκειμένου να μπορέσετε να περιηγηθείτε στο ημερολόγιο με το κλειδί πληκτρολογίου: Χρησιμοποιήστε το πλήκτρο CMD ή CTRL + DOWN για να περιηγηθείτε στο πλαίσιο του ημερολογίου. Χρησιμοποιήστε πλήκτρα βέλους για να περιηγηθείτε στις ημερολογιακές ημέρες. Χρησιμοποιήστε CMD ή CTRL + δεξιά ή αριστερά πλήκτρα βέλους για να περιηγηθείτε σε μήνες. Χρησιμοποιήστε CMD ή CTRL + πάνω ή κάτω πλήκτρα βέλους για να περιηγηθείτε σε χρόνια.', + htmlTex: 'Χρησιμοποιήστε το πλήκτρο κάτω βέλους για να ανοίξετε το ημερολόγιο. Χρησιμοποιήστε τα πλήκτρα βέλους για να περιηγηθείτε στις ημέρες του ημερολογίου. Χρησιμοποιήστε το πλήκτρο cmd ή ctrl + δεξιά ή αριστερά βέλη για να περιηγηθείτε στους μήνες. Χρησιμοποιήστε το πλήκτρο cmd ή ctrl + πάνω ή κάτω βέλος για να περιηγηθείτε στα έτη.', }, he: { - htmlTex: 'על מנת להיות מסוגל לנווט בלוח השנה עם מקש המקלדת: השתמש במפתח CMD או Ctrl + Down Down כדי לנווט בהקשר של לוח השנה; השתמש במקשי חצים כדי לנווט בימי לוח השנה; השתמש במפתחות CMD או CTRL + ימין או שמאל כדי לנווט בחודשים; השתמש במפתחות CMD או Ctrl + Up או Down כדי לנווט בשנים;', + htmlTex: 'השתמש במקש חץ למטה כדי לפתוח את הלוח שנה; השתמש במקשי החץ לניווט בימי לוח השנה; השתמש במקש cmd או ctrl + מקשי החץ ימינה או שמאלה לניווט בין חודשים; השתמש במקש cmd או ctrl + מקשי החץ למעלה או למטה לניווט בין שנים;', }, hi: { - htmlTex: 'कीबोर्ड कुंजी के साथ कैलेंडर के माध्यम से नेविगेट करने में सक्षम होने के लिए: कैलेंडर संदर्भ में नेविगेट करने के लिए सीएमडी या सीटीआरएल + डाउन एरो कुंजी का उपयोग करें; कैलेंडर दिनों के माध्यम से नेविगेट करने के लिए तीर कुंजियों का उपयोग करें; महीनों के माध्यम से नेविगेट करने के लिए CMD या CTRL + दाएं या बाएं तीर कुंजियों का उपयोग करें; वर्षों के माध्यम से नेविगेट करने के लिए CMD या CTRL + अप या डाउन तीर कुंजियों का उपयोग करें;', + htmlTex: 'कैलेंडर खोलने के लिए नीचे तीर का उपयोग करें; कैलेंडर के दिनों में नेविगेट करने के लिए तीर का उपयोग करें; महीनों में नेविगेट करने के लिए cmd या ctrl + दायां या बाएं तीर का उपयोग करें; वर्षों में नेविगेट करने के लिए cmd या ctrl + ऊपर या नीचे तीर का उपयोग करें;', }, hr: { - htmlTex: 'Da biste se mogli kretati kroz kalendar s tipkovnicom tipki: Upotrijebite CMD ili Ctrl + tipku sa strelicom dolje za kretanje u kontekst kalendara; Upotrijebite tipke sa strelicama za kretanje kroz kalendarske dane; Koristite CMD ili Ctrl + tipke s desne ili lijeve strelice za kretanje kroz mjesece; Koristite CMD ili Ctrl + tipke sa strelicama gore ili dolje za kretanje kroz godine;', + htmlTex: 'Koristite tipku za strelicu prema dolje da biste otvorili kalendar; Koristite tipke sa strelicama za navigaciju kroz dane kalendara; Koristite tipke cmd ili ctrl + desno ili lijevo za navigaciju kroz mjesece; Koristite tipke cmd ili ctrl + gore ili dolje za navigaciju kroz godine;', }, hu: { - htmlTex: 'Annak érdekében, hogy a naptárban navigálhassunk a naptárban: használja a CMD vagy a CTRL + Down Arrow billentyűt a naptári kontextusban való navigáláshoz; A nyílgombokkal navigálhat a naptári napokon; Használja a CMD -t vagy a Ctrl + jobb vagy bal nyílgombot a hónapok során; Használja a CMD -t vagy a Ctrl + felfelé vagy lefelé tartó nyíl kulcsokat az évek során;', + htmlTex: 'Használja az "Arrow Down" gombot a naptár megnyitásához; Használja az "Arrow" gombokat a naptári napok közötti navigáláshoz; Használja a cmd vagy ctrl + jobb vagy bal nyilakat a hónapok közötti navigáláshoz; Használja a cmd vagy ctrl + fel vagy le nyilakat az évek közötti navigáláshoz;', }, hy: { - htmlTex: 'Որպեսզի կարողանաք նավարկվել ստեղնաշարի ստեղնաշարի միջոցով. Օգտագործեք CMD կամ Ctrl + Down Arrow ստեղնը `օրացուցային համատեքստում նավարկելու համար. Օրացուցային օրերի միջոցով նավարկելու համար օգտագործեք սլաքների ստեղներ; Օգտագործեք CMD կամ CTRL + աջ կամ ձախ սլաքի ստեղներ `ամիսների միջոցով նավարկելու համար; Տարիներ շարունակ նավարկելու համար օգտագործեք CMD կամ CTRL + Up կամ Down Arrow ստեղներ.', + htmlTex: 'Օգտագործեք "Ներքև" սլաքը թողնելու համար՝ օգտագործեք սլաքերը օրվանին նավահանելու համար։ օգտագործեք cmd կամ ctrl + աջ կամ ձախ սլաքերը ամսերի մեջ հանելու համար։ օգտագործեք cmd կամ ctrl + վերև կամ ներքև սլաքերը տասնամյա մեջ հանելու համար։', }, id: { - htmlTex: 'Untuk dapat menavigasi melalui kalender dengan kunci keyboard: Gunakan CMD atau Ctrl + Down Arrow Key untuk menavigasi ke konteks kalender; Gunakan tombol panah untuk menavigasi melalui hari kalender; Gunakan cmd atau ctrl + tombol panah kanan atau kiri untuk menavigasi selama berbulan -bulan; Gunakan CMD atau Ctrl + Kunci Panah Atas atau Bawah untuk menavigasi selama bertahun -tahun;', + htmlTex: 'Gunakan tombol panah bawah untuk membuka kalender; Gunakan tombol panah untuk menavigasi melalui hari-hari kalender; Gunakan cmd atau ctrl + tombol panah kanan atau kiri untuk menavigasi melalui bulan-bulan; Gunakan cmd atau ctrl + tombol panah atas atau bawah untuk menavigasi melalui tahun-tahun;', }, is: { - htmlTex: 'Til þess að geta flett í gegnum dagatal með lyklaborðslykli: Notaðu CMD eða Ctrl + Down Arrow Key til að sigla í dagatal samhengi; Notaðu örlykla til að fletta í gegnum almanaksdaga; Notaðu CMD eða CTRL + hægri eða vinstri örvatakkana til að sigla í gegnum mánuði; Notaðu CMD eða Ctrl + upp eða niður örvatakkana til að sigla í gegnum ár;', + htmlTex: 'Notaðu niður örvarna til að opna dagatalið; Notaðu örvarnar til að sigla í gegnum daga dagatalið; Notaðu cmd eða ctrl + hægri eða vinstri örvarnar til að sigla í gegnum mánaði; Notaðu cmd eða ctrl + upp eða niður örvarnar til að sigla í gegnum árin;', }, it: { - htmlTex: 'Per poter navigare tramite il calendario con la chiave di tastiera: utilizzare il tasto CMD o CTRL + Down Freccia per navigare nel contesto del calendario; Usa i tasti freccia per navigare nei giorni di calendario; Utilizzare i tasti di freccia CMD o CTRL + destra o sinistra per navigare nei mesi; Utilizzare CMD o CTRL + UP o giù tasti freccia per navigare negli anni;', + htmlTex: 'Usa il tasto freccia giù per aprire il calendario; Usa le frecce per navigare attraverso i giorni del calendario; Usa cmd o ctrl + freccia destra o sinistra per navigare attraverso i mesi; Usa cmd o ctrl + freccia su o giù per navigare attraverso gli anni;', }, ja: { - htmlTex: 'キーボードキーを使用してカレンダーをナビゲートできるようにする矢印キーを使用して、暦日をナビゲートします。 CMDまたはCTRL +右矢印キーまたは左矢印キーを使用して、数か月を航行します。 CMDまたはCtrl +上または下の矢印キーを使用して、年を操作します。', + htmlTex: 'カレンダーを開くには矢印キーを下に使用してください；カレンダーの日付を移動するには矢印キーを使用してください；月を移動するにはcmdまたはctrlキーと右矢印キーまたは左矢印キーを使用してください；年を移動するにはcmdまたはctrlキーと上矢印キーまたは下矢印キーを使用してください；', }, ka: { - htmlTex: 'იმისათვის, რომ შეძლოთ კალენდარი კლავიშის გასაღებით კალენდარში: გამოიყენეთ CMD ან Ctrl + Down Arrow გასაღები კალენდარული კონტექსტში გადასასვლელად; გამოიყენეთ ისრის გასაღებები კალენდარული დღეების ნავიგაციისთვის; გამოიყენეთ CMD ან CTRL + მარჯვენა ან მარცხენა ისრის გასაღებები, რომ მოხდეს ნავიგაცია თვეების განმავლობაში; გამოიყენეთ CMD ან CTRL + ზემოთ ან ქვემოთ ისრის გასაღებები, რომლითაც წლების განმავლობაში ნავიგაციაა;', + htmlTex: 'გამოიყენეთ ქვევით მდგომარე ღილაკი კალენდრის გახსნისათვის; გამოიყენეთ კლავიში კალენდრის დღეებზე ნავიგაციისთვის; გამოიყენეთ cmd ან ctrl + მარჯვნაის ან მარცხნაის ღილაკები თვეების შესამოწმებლად; გამოიყენეთ cmd ან ctrl + ზემოთ ან ქვემოთ მდგარე ღილაკები წლების შესამოწმებლად;', }, km: { - htmlTex: 'ដើម្បីអាចរុករកតាមប្រតិទិនដោយប្រើគ្រាប់ចុចក្តារចុច: ប្រើ CMD ឬបញ្ជា (Ctrl) + គ្រាប់ចុចព្រួញចុះក្រោមដើម្បីរុករកទៅក្នុងបរិបទប្រតិទិន; ប្រើគ្រាប់ចុចព្រួញដើម្បីរុករកតាមថ្ងៃប្រតិទិន; ប្រើ CMD ឬបញ្ជា (Ctrl) + គ្រាប់ចុចព្រួញស្ដាំឬឆ្វេងដើម្បីរុករកពេញមួយខែ; ប្រើ CMD ឬបញ្ជា (Ctrl) + គ្រាប់ចុចព្រួញចុះក្រោមឬចុះក្រោមដើម្បីរុករកពេញមួយឆ្នាំ;', + htmlTex: 'ប្រើព្រួញក្រាហ្វាសក្រាហ្វាសដើម្បីបើកប្រតិទិន; ប្រើព្រួញក្រាហ្វាសដើម្បីរុករុករបស់ថ្ងៃកូនក្នុងប្រតិទិន; ប្រើព្រួញ cmd ឬ ctrl + ព្រួញស្ដាំឬស្តាំខ្លីដើម្បីរុករុករបស់ខែ; ប្រើព្រួញ cmd ឬ ctrl + ព្រួញឡើងឬឡើងដើម្បីរុករុករបស់ឆ្នាំ;', }, ko: { - htmlTex: '키보드 키로 캘린더를 탐색 할 수 있으려면 : CMD 또는 CTRL + 다운 화살표 키를 사용하여 캘린더 컨텍스트로 탐색하십시오. 화살표 키를 사용하여 달력 일을 탐색하십시오. CMD 또는 CTRL + 오른쪽 또는 왼쪽 화살표 키를 사용하여 몇 달 동안 탐색하십시오. CMD 또는 Ctrl + Up 또는 Down Arrow 키를 사용하여 수년 동안 탐색하십시오.', + htmlTex: '달력을 열려면 아래쪽 화살표 키를 사용하십시오. 달력 날짜를 탐색하려면 화살표 키를 사용하십시오. 월을 탐색하려면 cmd 또는 ctrl + 오른쪽 또는 왼쪽 화살표 키를 사용하십시오. 년도를 탐색하려면 cmd 또는 ctrl + 위쪽 또는 아래쪽 화살표 키를 사용하십시오.', }, kz: { - htmlTex: 'Пернетақта пернесімен күнтізбе арқылы шарлау алу үшін: Күнтізбе мәтінмәніне өту үшін CMD немесе CTRL + төмен көрсеткісін пайдаланыңыз; Күнтізбелік күндерде шарлау үшін көрсеткі пернелерді қолданыңыз; Айдармен шарлау үшін CMD немесе CTRL + оң немесе сол жақ көрсеткі пернелерін пайдаланыңыз; Жылдар бойына шарлау үшін CMD немесе CTRL + UP немесе төмен көрсеткілерді қолданыңыз;', + htmlTex: 'Қалендарды ашу үшін жоғары жақ көрсеткінді пайдаланыңыз; Календардың күндері арасында навигациялау үшін көрсеткінді пайдаланыңыз; Айдарды навигациялау үшін cmd немесе ctrl + оң немесе сол көрсеткінді пайдаланыңыз; Жылдарды навигациялау үшін cmd немесе ctrl + жоғары немесе төмен көрсеткінді пайдаланыңыз;', }, lt: { - htmlTex: 'Norėdami naršyti po kalendorių su klaviatūros klavišu: naudokite CMD arba Ctrl + Down rodyklės klavišą, kad galėtumėte pereiti į kalendoriaus kontekstą; Naudokite rodyklės klavišus, kad galėtumėte naršyti per kalendorines dienas; Norėdami naršyti po mėnesius, naudokite CMD arba CTRL + dešinę arba kairiąją rodyklės klavišus; Norėdami naršyti po metus, naudokite CMD arba CTRL + aukštyn arba žemyn rodyklių klavišus;', + htmlTex: 'Naudokite rodyklės žemyn klavišą, kad atidarytumėte kalendorių; Naudokite rodykles, kad naršytumėte kalendoriaus dienas; Naudokite cmd arba ctrl + dešinįjį arba kairįjį rodyklę, kad naršytumėte mėnesius; Naudokite cmd arba ctrl + aukštyn arba žemyn rodyklę, kad naršytumėte metus;', }, lv: { - htmlTex: 'Lai varētu pārvietoties pa kalendāru ar tastatūras atslēgu: izmantojiet CMD vai CTRL + lejupejošo bultiņas atslēgu, lai pārietu kalendāra kontekstā; Izmantojiet bulttaustiņus, lai pārvietotos kalendārajās dienās; Izmantojiet CMD vai CTRL + labās vai kreisās bultiņas taustiņus, lai pārvietotos mēnešos; Izmantojiet cmd vai ctrl + uz augšu vai uz leju bultiņu taustiņiem, lai pārvietotos pa gadiem;', + htmlTex: 'Izmantojiet bultiņu uz leju taustiņu, lai atvērtu kalendāru; Izmantojiet bultiņas, lai navigētu caur kalendāra dienām; Izmantojiet cmd vai ctrl + pa labi vai pa kreisi bultiņas, lai navigētu mēnešos; Izmantojiet cmd vai ctrl + uz augšu vai uz leju bultiņas, lai navigētu gados;', }, mk: { - htmlTex: 'За да можете да се движите низ календарот со копчето за тастатура: Користете го копчето CMD или Ctrl + Down Arrow за да се движите во контекст на календарот; Користете ги копчињата со стрела за да се движите низ календарските денови; Користете CMD или CTRL + десно или лево стрела со стрелки за да се движите низ месеци; Користете CMD или CTRL + UPAR или DOWN ARROW ARROW за да се движите низ години;', + htmlTex: 'Користете го копчето со стрелка надолу за да отворите календар; Користете стрелките за да навигирате низ деновите во календарот; Користете го копчето cmd или ctrl + стрелка десно или лево за да навигирате низ месеци; Користете го копчето cmd или ctrl + стрелка горе или долу за да навигирате низ годините;', }, mn: { - htmlTex: 'Гарын түлхүүрээр хуанлигаар дамжуулж явах боломжтой байхын тулд: CMD эсвэл CTTL + Down Arge Acew Aurow товчийг ашиглана уу; Календарийн өдрүүдийг дамжуулан чиглүүлэхийн тулд сумны товчлууруудыг ашиглана уу; CMD эсвэл CTD эсвэл CTRL + Баруун эсвэл зүүн сумыг ашиглан сараар дамжин өнгөрөх; CMD эсвэл CTRL + UP эсвэл AP A эсвэл DOWN ARCE товчийг ашиглан олон жилийн турш дамжин өнгөрөх;', + htmlTex: 'Календарыг нээхийн тулд доошилтуур товчлуурыг ашиглана уу; Календарын өдөрүүдэд хүрэхийн тулд доошилтуур товчлуурыг ашиглана уу; Саруудад нэвтрүүлгэн тохируулахын тулд cmd эсвэл ctrl + баруун эсвэл зүүн доошилтуур товчлуурыг ашиглана уу; Жилийг нэвтрүүлгэн тохируулахын тулд cmd эсвэл ctrl + доошилтуур товчлуурыг дээш эсвэл доошилтуур ашиглана уу;', }, ms: { - htmlTex: 'Untuk dapat menavigasi kalendar dengan kunci papan kekunci: Gunakan kekunci anak panah CMD atau Ctrl + Down untuk menavigasi ke dalam konteks kalendar; Gunakan kekunci anak panah untuk menavigasi hari kalendar; Gunakan CMD atau Ctrl + kekunci anak panah kanan atau kiri untuk menavigasi melalui bulan; Gunakan kekunci anak panah CMD atau CTRL + UP atau DOWN untuk menavigasi selama bertahun -tahun;', + htmlTex: 'Guna pakai ke bawah panah untuk membuka kalendar; Guna ke bawah panah untuk melayari hari-hari kalendar; Guna cmd atau ctrl + panah ke kanan atau kiri untuk melayari bulan; Guna cmd atau ctrl + panah ke atas atau bawah untuk melayari tahun;', }, my: { - htmlTex: 'ပြက္ခဒိန်ကို Keyboard Key ဖြင့်သွားလာနိုင်ရန်အတွက် CMD သို့မဟုတ် Ctrl + Down arrow ကိုသုံးပါ။ ပြက္ခဒိန်ရက်များမှတစ်ဆင့်သွားရန်မြှားသော့များကိုသုံးပါ။ လများလေသွားရန် CMD သို့မဟုတ် CTRL + လက်ဝဲသို့မဟုတ်လက်ဝဲမြှားခလုတ်များကိုသုံးပါ။ နှစ်ပေါင်းသွားရန် CMD သို့မဟုတ် Ctrl + Up သို့မဟုတ် Up arrow သော့များကိုသုံးပါ။', + htmlTex: 'ကော်နာနှင့် ရွှေတိုးကို ဖွင့်ပါ။ ကိုက်ဘ်လက်များကို ရှာဖွေရန်အသုံးပြုပါ။ ကိုနှင့် ctrl သို့မဟုတ်အမြင်ကို ညာဘက်သို့မဟုတ် ညာမြက်သို့မှစားရင်းသားကို ရှာဖွေရန်အသုံးပြုပါ။', }, nl: { - htmlTex: 'Om door de agenda met toetsenbordsleutel door de kalender te kunnen navigeren: gebruik CMD of Ctrl + Down Arrow -toets om naar de context van de kalender te navigeren; Gebruik pijltoetsen om door kalenderdagen te navigeren; Gebruik CMD of Ctrl + rechter- of linker pijltoetsen om maanden door te navigeren; Gebruik CMD of Ctrl + omhoog of omlaag pijltoetsen om jaren door te navigeren;', + htmlTex: 'Gebruik de pijl-omlaag-toets om de kalender te openen; Gebruik de pijltoetsen om door kalenderdagen te navigeren; Gebruik cmd of ctrl + rechter- of linkerpijltoetsen om door maanden te navigeren; Gebruik cmd of ctrl + omhoog- of omlaagpijltoetsen om door jaren te navigeren;', }, nb: { - htmlTex: 'For å kunne navigere gjennom kalender med tastaturnøkkel: Bruk CMD eller CTRL + ned piletasten for å navigere inn i kalenderkontekst; Bruk piltastene for å navigere gjennom kalenderdagene; Bruk CMD eller Ctrl + høyre eller venstre piltaster for å navigere gjennom måneder; Bruk CMD eller Ctrl + opp eller ned piltastene for å navigere gjennom år;', + htmlTex: 'Bruk piltasten ned for å åpne kalenderen; Bruk piltastene for å navigere gjennom kalenderens dager; Bruk cmd eller ctrl + høyre eller venstre piltast for å navigere gjennom månedene; Bruk cmd eller ctrl + opp eller ned piltast for å navigere gjennom årene;', }, nn: { - htmlTex: 'For å kunne navigere gjennom kalender med tastaturnøkkel: Bruk CMD eller CTRL + ned piletasten for å navigere inn i kalenderkontekst; Bruk piltastene for å navigere gjennom kalenderdagene; Bruk CMD eller Ctrl + høyre eller venstre piltaster for å navigere gjennom måneder; Bruk CMD eller Ctrl + opp eller ned piltastene for å navigere gjennom år;', + htmlTex: 'Bruk piltasten ned for å opne kalenderen; Bruk piltastane for å navigere gjennom kalenderdagar; Bruk cmd eller ctrl + høgre eller venstre piltast for å navigere gjennom månader; Bruk cmd eller ctrl + opp eller ned piltast for å navigere gjennom år;', }, no: { - htmlTex: 'For å kunne navigere gjennom kalender med tastaturnøkkel: Bruk CMD eller CTRL + ned piletasten for å navigere inn i kalenderkontekst; Bruk piltastene for å navigere gjennom kalenderdagene; Bruk CMD eller Ctrl + høyre eller venstre piltaster for å navigere gjennom måneder; Bruk CMD eller Ctrl + opp eller ned piltastene for å navigere gjennom år;', + htmlTex: 'Bruk piltasten ned for å åpne kalenderen; Bruk piltastene for å navigere gjennom kalenderdager; Bruk cmd eller ctrl + høyre eller venstre piltast for å navigere gjennom månedene; Bruk cmd eller ctrl + opp eller ned piltast for å navigere gjennom år;', }, pa: { - htmlTex: 'ਕ੍ਰਮ ਵਿੱਚ ਕੀਬੋਰਡ ਕੁੰਜੀ ਨਾਲ ਕੈਲੰਡਰ ਤੇ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣ ਲਈ: ਕੈਲੰਡਰ ਪ੍ਰਸੰਗ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਸੀ.ਐੱਮ.ਡੀ. ਜਾਂ CTRL + ਡਾਉਨ ਐਰੋ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ; ਕੈਲੰਡਰ ਦੇ ਦਿਨਾਂ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਐਰੋ ਕੁੰਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ; ਮਹੀਨਿਆਂ ਦੇ ਜ਼ਰੀਏ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਸੀ.ਐੱਮ.ਡੀ. ਜਾਂ Ctrl + ਸੱਜੇ ਜਾਂ ਖੱਬੀ ਐਰੋ ਦੀਆਂ ਕੁੰਜੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰੋ; ਸਾਲਾਂ ਦੁਆਰਾ ਨੇਵੀਗੇਟ ਕਰਨ ਲਈ ਸੀ.ਐੱਮ.ਡੀ. ਜਾਂ Ctrl + U ਉੱਪਰ ਜਾਂ ਹੇਠਾਂ ਐਰੋ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰੋ;', + htmlTex: 'ਕੈਲੰਡਰ ਖੋਲਣ ਲਈ ਹੇਠਾਂ ਆਰੋ ਕੁੱਝ ਕਰੋ; ਕੈਲੰਡਰ ਦਿਨਾਂ ਵਿੱਚ ਸਿਰਣ ਲਈ ਆਰੋ ਕੁੱਝ ਕਰੋ; ਮਹੀਨਿਆਂ ਵਿੱਚ ਸਿਰਣ ਲਈ cmd ਜਾਂ ctrl + ਸੱਜੇ ਜਾਂ ਖੱਬੇ ਆਰੋ ਕੁੱਝ ਕਰੋ; ਸਾਲਾਂ ਵਿੱਚ ਸਿਰਣ ਲਈ cmd ਜਾਂ ctrl + ਉੱਤੇ ਜਾਂ ਹੇਠੇ ਆਰੋ ਕੁੱਝ ਕਰੋ;', }, pl: { - htmlTex: 'Aby móc poruszać się po kalendarzu z klawiszem klawiatury: Użyj CMD lub CTRL + Down Strzałka, aby nawigować do kontekstu kalendarza; Użyj klawiszy strzałek do nawigacji przez dni kalendarzowe; Użyj klawiszy CMD lub CTRL + prawej lub lewej strzałki, aby poruszać się przez miesiące; Użyj CMD lub CTRL + w górę lub w dół klawiszy strzałek, aby poruszać się przez lata;', + htmlTex: 'Użyj klawisza strzałki w dół, aby otworzyć kalendarz; Użyj strzałek, aby nawigować przez dni kalendarza; Użyj klawiszy cmd lub ctrl + strzałka w prawo lub lewo, aby nawigować między miesiącami; Użyj klawiszy cmd lub ctrl + strzałka w górę lub w dół, aby nawigować między latami;', }, pt: { - htmlTex: 'Para poder navegar pelo calendário com a tecla do teclado: use a tecla de seta CMD ou CTRL + Down para navegar no contexto do calendário; Use teclas de seta para navegar pelos dias do calendário; Use as teclas de seta CMD ou CTRL + direita ou esquerda para navegar por meses; Use as teclas de seta CMD ou Ctrl + para cima ou para baixo para navegar por anos;', + htmlTex: 'Use a tecla de seta para baixo para abrir o calendário; Use as teclas de seta para navegar pelos dias do calendário; Use cmd ou ctrl + seta para a direita ou esquerda para navegar pelos meses; Use cmd ou ctrl + seta para cima ou para baixo para navegar pelos anos;', }, ro: { - htmlTex: 'Pentru a putea naviga prin calendarul cu tasta tastatură: utilizați tasta CMD sau Ctrl + Down Arrow pentru a naviga în contextul calendaristic; Utilizați tastele săgeată pentru a naviga în zilele calendaristice; Utilizați tastele săgeată CMD sau Ctrl + dreapta sau stânga pentru a naviga prin luni; Utilizați tastele săgeată CMD sau Ctrl + în sus sau în jos pentru a naviga de -a lungul anilor;', + htmlTex: 'Utilizați tasta săgeată în jos pentru a deschide calendarul; Utilizați tastele săgeată pentru a naviga prin zilele calendarului; Utilizați cmd sau ctrl + săgeată dreapta sau stânga pentru a naviga prin lunile calendarului; Utilizați cmd sau ctrl + săgeată sus sau jos pentru a naviga prin ani;', }, ru: { - htmlTex: 'Чтобы иметь возможность ориентироваться в календаре с клавишной клавиатурой: используйте CMD или CTRL + Down Cool для перемещения в контекст календаря; Используйте клавиши стрел, чтобы перемещаться по календарным дням; Используйте CMD или CTRL + правые или левые клавиши со стрелками, чтобы перемещаться в течение нескольких месяцев; Используйте CMD или CTRL + вверх или вниз клавиши со стрелками, чтобы перемещаться по годам;', + htmlTex: 'Используйте клавишу стрелки вниз, чтобы открыть календарь; Используйте стрелки для навигации по дням календаря; Используйте клавиши cmd или ctrl + стрелка вправо или влево для навигации между месяцами; Используйте клавиши cmd или ctrl + стрелка вверх или вниз для навигации по годам;', }, si: { - htmlTex: 'යතුරුපුවරු යතුර සමඟ දින දර්ශනය හරහා සැරිසැරීමට හැකි වීම සඳහා: දින දර්ශන සන්දර්භය තුළට යාත්රා කිරීම සඳහා CMD හෝ CTRL + Down ඊතල යතුර භාවිතා කරන්න. දින දර්ශන දින හරහා සැරිසැරීමට ඊතල යතුරු භාවිතා කරන්න; මාස හරහා සැරිසැරීමට Cmd හෝ Ctrl + දකුණ හෝ වම් ඊතල යතුරු භාවිතා කරන්න; අවුරුදු ගණනාව තුළ සැරිසැරීමට CMD හෝ CTRL + ඉහළට හෝ පහළට ඊතල යතුරු භාවිතා කරන්න;', + htmlTex: 'දිවය විවෘත කිරීමට දවස කිරීම සඳහා ඊරාව් මෝල භාරතීය කරන්න; දින සඳහා ඊරා කිරීම සඳහා ඊරා මෝල භාරතීය කරන්න; මාමාන සඳහා cmd හෝ ctrl + වමට හෝ දකුණු ඊරා කිරීම සඳහා; වරාය සඳහා cmd හෝ ctrl + ඉහළ හෝ අසල ඊරා කිරීම සඳහා ඊරා කිරීමට භාරතීය කරන්න;', }, sk: { - htmlTex: 'Aby ste mohli prejsť v kalendári s klávesom Keyboard: Použite navigáciu šípky CMD alebo CTRL + Down navigáciu do kontextu kalendára; Použite klávesy so šípkami na prechádzanie v kalendárnych dňoch; Na previgovanie cez mesiace použite klávesy CMD alebo CTRL + pravého alebo ľavého šípky; Na previgovanie rokov používajte navigáciu šípov CMD alebo CTRL + hore alebo dole;', + htmlTex: 'Použite kláves smerom nadol na otvorenie kalendára; Použite šípky smerom hore a dole na navigáciu medzi dňami v kalendári; Použite klávesy cmd alebo ctrl + vpravo alebo vľavo na navigáciu medzi mesiacmi; Použite klávesy cmd alebo ctrl + smerom hore alebo dolu na navigáciu medzi rokmi;', }, sl: { - htmlTex: 'Da bi lahko krmarili po koledarju s tipkovnico tipkovnice: s tipko puščice CMD ali CTRL + Down za krmarjenje v koledarski kontekst; Uporabite puščice za krmarjenje po koledarskih dneh; Za krmarjenje po mesecih uporabite tipke CMD ali CTRL + desno ali levo puščico; Za krmarjenje skozi leta uporabite tipke CMD ali CTRL + UP ali Down;', + htmlTex: 'Uporabite tipko s puščico dol za odpiranje koledarja; Uporabite puščične tipke za krmarjenje med dnevi v koledarju; Uporabite tipki cmd ali ctrl + desno ali levo puščico za krmarjenje med meseci; Uporabite tipki cmd ali ctrl + puščico gor ali dol za krmarjenje med leti;', }, sq: { - htmlTex: 'Në mënyrë që të jeni në gjendje të lundroni përmes kalendarit me çelësin e tastierës: Përdorni çelësin CMD ose Ctrl + Down Arrow për të lundruar në kontekstin e kalendarit; Përdorni çelësat e shigjetave për të lundruar nëpër ditë kalendarike; Përdorni çelësat e shigjetës CMD ose CTRL + të djathtë ose të majtë për të lundruar me muaj; Përdorni çelësat e shigjetës CMD ose Ctrl + Up ose Down për të lundruar me vite;', + htmlTex: 'Përdorni tastierën me shigjetën poshtë për të hapur kalendarin; Përdorni tastierën me shigjetën lart dhe poshtë për të lëvizur nëpër ditët e kalendarit; Përdorni tastierën cmd ose ctrl + majtas ose djathtas për të lëvizur nëpër muajt; Përdorni tastierën cmd ose ctrl + shigjetën lart ose poshtë për të lëvizur nëpër vitet;', }, sr: { - htmlTex: 'Да бисте могли да се крећете кроз календар са кључем тастатуре: Користите ЦМД или ЦТРЛ + тастер са стрелицом до надоле да бисте се кретали у календарски контекст; Користите тастере са стрелицама да бисте се кретали кроз календарске дане; Користите ЦМД или ЦТРЛ + десно или лијево типке са стрелицом да бисте се кретали кроз месецима; Користите ЦМД или ЦТРЛ + горе или доле стрелице са стрелицама да бисте се кретали кроз године;', + htmlTex: 'Koristite taster strelica nadole da biste otvorili kalendar; Koristite tasteri strelica za navigaciju kroz dane kalendara; Koristite cmd ili ctrl + strelice desno ili levo za navigaciju kroz mesece; Koristite cmd ili ctrl + strelice gore ili dole za navigaciju kroz godine;', }, sv: { - htmlTex: 'För att kunna navigera genom kalendern med tangentbordsnyckel: Använd CMD eller CTRL + Down Arrow -tangent för att navigera i kalendersammanhang; Använd pilnycklar för att navigera genom kalenderdagarna; Använd CMD eller CTRL + höger eller vänster pilnycklar för att navigera genom månader; Använd CMD eller CTRL + upp eller ned pilnycklar för att navigera genom år;', + htmlTex: 'Använd piltangenten nedåt för att öppna kalendern; Använd piltangenterna för att navigera genom kalenderdagar; Använd cmd eller ctrl + höger eller vänster piltangent för att navigera genom månader; Använd cmd eller ctrl + upp eller ner piltangent för att navigera genom år;', }, th: { - htmlTex: 'เพื่อให้สามารถนำทางผ่านปฏิทินด้วยคีย์บอร์ดคีย์บอร์ด: ใช้ปุ่มลูกศร CMD หรือ CTRL + ลงเพื่อนำทางไปยังบริบทของปฏิทิน ใช้ปุ่มลูกศรเพื่อนำทางผ่านวันปฏิทิน ใช้ปุ่มลูกศร CMD หรือ CTRL + ขวาหรือซ้ายเพื่อนำทางผ่านเดือน ใช้ปุ่มลูกศร CMD หรือ CTRL + ขึ้นหรือลงเพื่อนำทางผ่านปี', + htmlTex: 'ใช้ปุ่มลูกศรลงเพื่อเปิดปฏิทิน; ใช้ปุ่มลูกศรเพื่อนำทางผ่านวันที่ในปฏิทิน; ใช้ cmd หรือ ctrl + ปุ่มลูกศรขวาหรือซ้ายเพื่อนำทางผ่านเดือน; ใช้ cmd หรือ ctrl + ปุ่มลูกศรขึ้นหรือลงเพื่อนำทางผ่านปี;', }, tr: { - htmlTex: 'Klavye tuşu ile takvimde gezinebilmesi için: takvim bağlamında gezinmek için CMD veya CTRL + Down ok tuşunu kullanın; Takvim günlerinde gezinmek için ok tuşlarını kullanın; Aylar boyunca gezinmek için CMD veya CTRL + sağ veya sol ok tuşlarını kullanın; Yıllar boyunca gezinmek için CMD veya Ctrl + yukarı veya aşağı ok tuşlarını kullanın;', + htmlTex: 'Takvimi açmak için aşağı ok tuşunu kullanın; Takvim günleri arasında gezinmek için ok tuşlarını kullanın; Aylar arasında gezinmek için cmd veya ctrl + sağ veya sol ok tuşlarını kullanın; Yıllar arasında gezinmek için cmd veya ctrl + yukarı veya aşağı ok tuşlarını kullanın;', }, uk: { - htmlTex: 'Для того, щоб мати змогу орієнтуватися по календару за допомогою клавіші клавіатури: Використовуйте клавішу стрілки CMD або CTRL + вниз, щоб перейти до контексту календаря; Використовуйте клавіші зі стрілками, щоб орієнтуватися на календарні дні; Використовуйте клавіші стрілки CMD або CTRL + ліва або ліва, щоб навігація через місяці; Використовуйте клавіші стрілки CMD або CTRL + вгору або вниз, щоб орієнтуватися на роки;', + htmlTex: 'Використовуйте клавішу стрілка вниз, щоб відкрити календар; Використовуйте клавіші зі стрілкою, щоб переміщатися між днями календаря; Використовуйте клавіші cmd або ctrl + вправо або вліво, щоб переміщатися між місяцями; Використовуйте клавіші cmd або ctrl + стрілка вгору або вниз, щоб переміщатися між роками;', }, uz: { - htmlTex: "Klaviatura kaliti bilan taqvimga o'tish imkoniyatiga ega bo'lish uchun: CMD yoki CTRL + pastga quyish tugmachasini kalendar kontekstiga o'tish uchun foydalaning; Taqvim kunlari orqali harakat qilish uchun o'q tugmalaridan foydalaning; Bir necha oy ichida harakatlanish uchun CMD yoki CTRL + o'ng yoki chap o'q tugmachalaridan foydalaning; CMD yoki CTRL + yuqoriga yoki pastga o'qishni yillar davomida o'tish uchun foydalaning;", + htmlTex: "Kalendar ochish uchun pastga yo'naltirish tugmasidan foydalaning; Kalendar kunlaridan o'tish uchun pastga va tepaga yo'naltirish tugmalari qo'llaniladi; Oy o'rtasida o'tish uchun cmd yoki ctrl + chap yoki o'ng oyoq tugmalaridan foydalaning; Yil o'rtasida o'tish uchun cmd yoki ctrl + tepaga yoki pastga yo'naltirish tugmalari qo'llaniladi;", }, vn: { - htmlTex: 'Để có thể điều hướng qua lịch bằng phím bàn phím: sử dụng phím Mũi tên CMD hoặc CTRL + để điều hướng vào ngữ cảnh lịch; Sử dụng các phím mũi tên để điều hướng qua các ngày theo lịch; Sử dụng CMD hoặc CTRL + Phím mũi tên phải hoặc trái để điều hướng qua tháng; Sử dụng các phím mũi tên CMD hoặc CTRL + lên hoặc xuống để điều hướng qua nhiều năm;', + htmlTex: 'Sử dụng phím mũi tên xuống để mở lịch; Sử dụng các phím mũi tên để điều hướng qua các ngày trong lịch; Sử dụng cmd hoặc ctrl + phím mũi tên phải hoặc trái để điều hướng qua các tháng; Sử dụng cmd hoặc ctrl + phím mũi tên lên hoặc xuống để điều hướng qua các năm;', }, zh: { - htmlTex: '為了能夠使用鍵盤鍵瀏覽日曆：使用cmd或ctrl + down箭頭鍵導航到日曆上下文中；使用箭頭鍵在日曆日內導航；使用cmd或ctrl +右或左箭頭鍵在幾個月中導航；使用CMD或CTRL +向上或向下箭頭鍵在多年中導航；', + htmlTex: '使用下箭头键打开日历; 使用箭头键在日历天数之间导航; 使用cmd或ctrl +右或左箭头键导航月份; 使用cmd或ctrl +上或下箭头键导航年份;', }, zh_tw: { - htmlTex: '为了能够使用键盘键浏览日历：使用cmd或ctrl + down箭头键导航到日历上下文中；使用箭头键在日历日内导航；使用cmd或ctrl +右或左箭头键在几个月中导航；使用CMD或CTRL +向上或向下箭头键在多年中导航；', + htmlTex: '使用下箭頭鍵打開日曆; 使用箭頭鍵在日曆天數之間導航; 使用cmd或ctrl +右或左箭頭鍵導航月份; 使用cmd或ctrl +上或下箭頭鍵導航年份;', }, }; })(l10ns = Flatpickr.l10ns || (Flatpickr.l10ns = {})); @@ -18783,15 +19121,14 @@ var Providers; } } _manageAttributes() { - this._manageDisableStatus(); this.setA11YProperties(); } _manageDisableStatus() { if (this.configs.IsDisabled) { - OSFramework.OSUI.Helper.Dom.Attribute.Set(this.selfElement, OSFramework.OSUI.GlobalEnum.HTMLAttributes.Disabled, ''); + this.provider.$ele.disable(); } else { - OSFramework.OSUI.Helper.Dom.Attribute.Remove(this.selfElement, OSFramework.OSUI.GlobalEnum.HTMLAttributes.Disabled); + this.provider.$ele.enable(); } } _onMouseUp(event) { @@ -18907,9 +19244,9 @@ var Providers; OSFramework.OSUI.Helper.AsyncInvocation(this.virtualselectConfigs.close.bind(this.virtualselectConfigs)); } disable() { - if (this.configs.IsDisabled === false) { + if (this.configs.IsDisabled === false && this.provider !== undefined) { this.configs.IsDisabled = true; - this._manageDisableStatus(); + this.provider.$ele.disable(); } } dispose() { @@ -18928,9 +19265,9 @@ var Providers; super.dispose(); } enable() { - if (this.configs.IsDisabled) { + if (this.configs.IsDisabled && this.provider !== undefined) { this.configs.IsDisabled = false; - this._manageDisableStatus(); + this.provider.$ele.enable(); } } getSelectedValues() { @@ -19110,6 +19447,7 @@ var Providers; this._groupedOptionsList = groupedOptionsList; this._providerOptions = { ele: this.ElementId, + disabled: this.IsDisabled, dropboxWrapper: OSFramework.OSUI.GlobalEnum.HTMLElement.Body, hasOptionDescription: hasDescription, hideClearButton: false, @@ -20654,11 +20992,11 @@ var Providers; this._setCallbacks(); this._setUpEvents(); } - _onBodyScroll() { + _onScreenScroll() { if (this._picker.isBuilt) { if (this._picker.provider.isOpen) { this._picker.provider._positionCalendar(); - this._requestAnimationOnBodyScroll = requestAnimationFrame(this._onBodyScrollEvent); + this._requestAnimationOnBodyScroll = requestAnimationFrame(this._onScreenScrollEvent); } else { cancelAnimationFrame(this._requestAnimationOnBodyScroll); @@ -20666,21 +21004,21 @@ var Providers; } } _setCallbacks() { - this._onBodyScrollEvent = this._onBodyScroll.bind(this); + this._onScreenScrollEvent = this._onScreenScroll.bind(this); } _setUpEvents() { - OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSFramework.OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._onBodyScrollEvent); + OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.addHandler(OSFramework.OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._onScreenScrollEvent); } _unsetCallbacks() { - this._onBodyScrollEvent = undefined; + this._onScreenScrollEvent = undefined; } _unsetEvents() { - OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSFramework.OSUI.Event.DOMEvents.Listeners.Type.BodyOnScroll, this._onBodyScrollEvent); + OSFramework.OSUI.Event.DOMEvents.Listeners.GlobalListenerManager.Instance.removeHandler(OSFramework.OSUI.Event.DOMEvents.Listeners.Type.ScreenOnScroll, this._onScreenScrollEvent); } dispose() { this._unsetEvents(); this._unsetCallbacks(); - this._onBodyScrollEvent = undefined; + this._onScreenScrollEvent = undefined; this._requestAnimationOnBodyScroll = undefined; } }