diff --git a/.github/workflows/deploy-latest-docs.yaml b/.github/workflows/deploy-latest-docs.yaml index edc84e021356..afed7a5f8e18 100644 --- a/.github/workflows/deploy-latest-docs.yaml +++ b/.github/workflows/deploy-latest-docs.yaml @@ -14,7 +14,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install and Build diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index fee0eb1a74e5..2ce76d4f8c92 100644 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -11,7 +11,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install and Build diff --git a/.github/workflows/deploy_latest.yaml b/.github/workflows/deploy_latest.yaml index 226a66bf22fc..b1a46e1f9e9c 100644 --- a/.github/workflows/deploy_latest.yaml +++ b/.github/workflows/deploy_latest.yaml @@ -11,7 +11,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install and Build diff --git a/.github/workflows/release-auto-weekly.yaml b/.github/workflows/release-auto-weekly.yaml index 092c0e811bdf..7591d9c8b684 100644 --- a/.github/workflows/release-auto-weekly.yaml +++ b/.github/workflows/release-auto-weekly.yaml @@ -14,7 +14,7 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install diff --git a/.github/workflows/release-custom-tag.yaml b/.github/workflows/release-custom-tag.yaml index 2bf2dfabd0e6..ea011f4888e1 100644 --- a/.github/workflows/release-custom-tag.yaml +++ b/.github/workflows/release-custom-tag.yaml @@ -18,7 +18,7 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install diff --git a/.github/workflows/release-snapshot.yaml b/.github/workflows/release-snapshot.yaml index 3d348d4d88f3..ef374ce472d6 100644 --- a/.github/workflows/release-snapshot.yaml +++ b/.github/workflows/release-snapshot.yaml @@ -10,7 +10,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index bc3100059bf2..16c9afc0b71a 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -23,7 +23,7 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install diff --git a/.github/workflows/test-issue-comments.yaml b/.github/workflows/test-issue-comments.yaml index 0e41c3b4768a..59c23874a238 100644 --- a/.github/workflows/test-issue-comments.yaml +++ b/.github/workflows/test-issue-comments.yaml @@ -12,7 +12,7 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install diff --git a/.github/workflows/test-storybook.yaml b/.github/workflows/test-storybook.yaml index 5e89465cf177..de18c5e3fe7a 100644 --- a/.github/workflows/test-storybook.yaml +++ b/.github/workflows/test-storybook.yaml @@ -13,7 +13,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install and Build diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml index 71b46754143f..7f98a49a4ccf 100644 --- a/.github/workflows/test.yaml +++ b/.github/workflows/test.yaml @@ -15,7 +15,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 cache: 'yarn' - name: Install Dependencies diff --git a/CHANGELOG.md b/CHANGELOG.md index 59348101f0eb..500c02f9c09b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,229 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* declare webpackChunkName in generated dynamic imports for readable runtime bundle names ([#7835](https://github.com/SAP/ui5-webcomponents/issues/7835)) ([592a10b](https://github.com/SAP/ui5-webcomponents/commit/592a10b25a14da89885874c40c5c7a192b8b4d85)) +* **ui5-list:** shift+tab navigation in List ([#7728](https://github.com/SAP/ui5-webcomponents/issues/7728)) ([399b941](https://github.com/SAP/ui5-webcomponents/commit/399b941ebeae7b44f6dba9cd4e8ec7ebb6f283c6)) + + +### Features + +* **ui5-illustrated-message:** titleLevel property added ([#7771](https://github.com/SAP/ui5-webcomponents/issues/7771)) ([2883c58](https://github.com/SAP/ui5-webcomponents/commit/2883c587f367e51e0f08065498b990f86e60e88c)), closes [#7037](https://github.com/SAP/ui5-webcomponents/issues/7037) + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + + +### Bug Fixes + +* **ItemNavigation:** more than 1 ItemNavigation per component allowed ([#7798](https://github.com/SAP/ui5-webcomponents/issues/7798)) ([b1019af](https://github.com/SAP/ui5-webcomponents/commit/b1019aff6c4aced61458c1b718ffe0a3a7802ae2)) +* **ui5-segmented-button:** check for items before applying settings ([#7792](https://github.com/SAP/ui5-webcomponents/issues/7792)) ([7f11274](https://github.com/SAP/ui5-webcomponents/commit/7f112746d50381474ec86da5e428df79c17c6499)), closes [#7788](https://github.com/SAP/ui5-webcomponents/issues/7788) +* **ui5-time-picker:** check value before formatting ([#7793](https://github.com/SAP/ui5-webcomponents/issues/7793)) ([70deda8](https://github.com/SAP/ui5-webcomponents/commit/70deda85293d5e62e99530c9dc0747071d9ee59c)), closes [#7790](https://github.com/SAP/ui5-webcomponents/issues/7790) + + +### Features + +* **ui5-illustrated-message:** added new TNT illustrations ([#7773](https://github.com/SAP/ui5-webcomponents/issues/7773)) ([03f28b9](https://github.com/SAP/ui5-webcomponents/commit/03f28b90df0b2a28c0f09f67caaa0a5a1e63c4f3)) +* **ui5-side-navigation:** added href and target properties ([#7682](https://github.com/SAP/ui5-webcomponents/issues/7682)) ([7530f00](https://github.com/SAP/ui5-webcomponents/commit/7530f00b589d0b95dcbee49f6ed980e9d36ba58b)) + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package ui5-webcomponents + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **FormSupport:** submit linebreaks in ui5-textarea ([#7757](https://github.com/SAP/ui5-webcomponents/issues/7757)) ([425e97b](https://github.com/SAP/ui5-webcomponents/commit/425e97bd5fa030155502f3b9c7022e0e1a3d3202)), closes [#7467](https://github.com/SAP/ui5-webcomponents/issues/7467) +* **framework:** use correct customElements registry ([#7760](https://github.com/SAP/ui5-webcomponents/issues/7760)) ([288f6d4](https://github.com/SAP/ui5-webcomponents/commit/288f6d4d6cee9dccf1c64fa12b3ead2920c6c08a)) +* **ui5-button:** align styles to specification ([#7784](https://github.com/SAP/ui5-webcomponents/issues/7784)) ([0cf1201](https://github.com/SAP/ui5-webcomponents/commit/0cf1201c132c993f71b14f0cd06c00300d742b0c)), closes [#7352](https://github.com/SAP/ui5-webcomponents/issues/7352) +* **ui5-calendar:** focus date set in slot ([#7735](https://github.com/SAP/ui5-webcomponents/issues/7735)) ([842f047](https://github.com/SAP/ui5-webcomponents/commit/842f047844ac7f06716813c2fa0ebcb3ae64c9a7)), closes [#7693](https://github.com/SAP/ui5-webcomponents/issues/7693) +* **ui5-combobox:** announce value state header on focus ([#7751](https://github.com/SAP/ui5-webcomponents/issues/7751)) ([1941854](https://github.com/SAP/ui5-webcomponents/commit/194185400bb70a778359a721928ad3a99bd5f3a6)) +* **ui5-list:** removed unnecessary accessibility reading ([#7758](https://github.com/SAP/ui5-webcomponents/issues/7758)) ([2f6780f](https://github.com/SAP/ui5-webcomponents/commit/2f6780f45ee2b6c60ead36c54ae634276d959b2e)), closes [#7601](https://github.com/SAP/ui5-webcomponents/issues/7601) +* **ui5-popup:** add check for initial focused element id ([#7746](https://github.com/SAP/ui5-webcomponents/issues/7746)) ([ec80fae](https://github.com/SAP/ui5-webcomponents/commit/ec80faee410d07fa53756a8972fed29bc969c40f)), closes [#7711](https://github.com/SAP/ui5-webcomponents/issues/7711) +* **ui5-slider:** update labels on min and max change ([#7764](https://github.com/SAP/ui5-webcomponents/issues/7764)) ([14fd642](https://github.com/SAP/ui5-webcomponents/commit/14fd6423ce0ecd6d34074e81c53ff5e6bdfdf7c8)) +* **ui5-tabcontainer:** add margins for the Overflow buttons (start and end) ([#7745](https://github.com/SAP/ui5-webcomponents/issues/7745)) ([612f503](https://github.com/SAP/ui5-webcomponents/commit/612f50351afcf407a8f86457532f7da0e856d4b5)), closes [#7291](https://github.com/SAP/ui5-webcomponents/issues/7291) +* **ui5-textarea:** remove white space from value state message ([#7755](https://github.com/SAP/ui5-webcomponents/issues/7755)) ([3df7d03](https://github.com/SAP/ui5-webcomponents/commit/3df7d038e5c16d3c885bc186d0df3d37f34b2f61)) +* **ui5-textarea:** select exceeded text ([#7741](https://github.com/SAP/ui5-webcomponents/issues/7741)) ([5a510cf](https://github.com/SAP/ui5-webcomponents/commit/5a510cff52a1e8d19f38f33b4582f9555aa28527)) +* **ui5-view-settings-dialog:** improve settings management ([#7769](https://github.com/SAP/ui5-webcomponents/issues/7769)) ([33cdb86](https://github.com/SAP/ui5-webcomponents/commit/33cdb86b34a3cb6e1b849a186a8c8c1652eb5bca)), closes [#7752](https://github.com/SAP/ui5-webcomponents/issues/7752) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + +### Reverts + +* **ui5-color-palette-item:** revert selected state feature ([#7782](https://github.com/SAP/ui5-webcomponents/issues/7782)) ([f24ff90](https://github.com/SAP/ui5-webcomponents/commit/f24ff9019287f1b0a83d543b6486e5eb4d34ed35)) + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + + +### Bug Fixes + +* **ui5-calendar:** adjust selected border color ([#7730](https://github.com/SAP/ui5-webcomponents/issues/7730)) ([45b11f9](https://github.com/SAP/ui5-webcomponents/commit/45b11f9e47be92d71058960bf7c0c5254cf8ca6a)) +* **ui5-color-picker:** fix hsl to rgb color conversion ([#7723](https://github.com/SAP/ui5-webcomponents/issues/7723)) ([4e95272](https://github.com/SAP/ui5-webcomponents/commit/4e9527225be27c957ea71f17a4cacb3bc065d6b7)), closes [#7660](https://github.com/SAP/ui5-webcomponents/issues/7660) +* **ui5-combobox:** exclude group from suggestions count ([#7713](https://github.com/SAP/ui5-webcomponents/issues/7713)) ([40ffa20](https://github.com/SAP/ui5-webcomponents/commit/40ffa2073410f655e4931bfbe7df0c1977f821fa)) +* **ui5-input:** add additional text to the item's announcement ([#7715](https://github.com/SAP/ui5-webcomponents/issues/7715)) ([6bcb970](https://github.com/SAP/ui5-webcomponents/commit/6bcb97039d6975f8e61f404dc8f6d2c72a249e6d)) +* **ui5-input:** update clear icon accessible name ([#7744](https://github.com/SAP/ui5-webcomponents/issues/7744)) ([5da1fbe](https://github.com/SAP/ui5-webcomponents/commit/5da1fbee98e7571056c52299324f185a51699f0e)) +* **ui5-popup:** apply responsive paddings as early as possible ([#7710](https://github.com/SAP/ui5-webcomponents/issues/7710)) ([f6e9ac4](https://github.com/SAP/ui5-webcomponents/commit/f6e9ac4d832f66aa3fca697a1b16200cf971b3d1)), closes [#7644](https://github.com/SAP/ui5-webcomponents/issues/7644) +* **ui5-tree-item-custom:** text wrapper allows proper alignment of flex content ([#7733](https://github.com/SAP/ui5-webcomponents/issues/7733)) ([46e89e7](https://github.com/SAP/ui5-webcomponents/commit/46e89e757a4a01875d3cd020eb6491f9677b9b77)), closes [#7483](https://github.com/SAP/ui5-webcomponents/issues/7483) + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + + +### Bug Fixes + +* escape special characters when scoping CSS vars ([#7704](https://github.com/SAP/ui5-webcomponents/issues/7704)) ([8888751](https://github.com/SAP/ui5-webcomponents/commit/888875121b56fa0c7216674acc580620d8e0d720)) +* **ui5-date-picker:** align value state colors with the spec ([#7676](https://github.com/SAP/ui5-webcomponents/issues/7676)) ([17a5b12](https://github.com/SAP/ui5-webcomponents/commit/17a5b122926720c3c2b07fc322cb480e867eb63a)) +* **ui5-flexible-column-layout:** wrong focus fixed ([#7586](https://github.com/SAP/ui5-webcomponents/issues/7586)) ([d55d061](https://github.com/SAP/ui5-webcomponents/commit/d55d061b946b083cb68606a719c81abd2d164be7)) +* **ui5-flexible-column-layout:** wrong focus fixed ([#7586](https://github.com/SAP/ui5-webcomponents/issues/7586)) ([721cc0b](https://github.com/SAP/ui5-webcomponents/commit/721cc0b312fb76142dea97712b21343b7b93337e)) +* **ui5-step-input:** fix z-index of increase/decrease buttons and focus ([#7709](https://github.com/SAP/ui5-webcomponents/issues/7709)) ([8bb9c4c](https://github.com/SAP/ui5-webcomponents/commit/8bb9c4c51a726b350d427de31cbf99c2d8fc6b31)) +* **ui5-tabcontainer:** update according to latest SAP Horizon design ([#7668](https://github.com/SAP/ui5-webcomponents/issues/7668)) ([57ff771](https://github.com/SAP/ui5-webcomponents/commit/57ff771c82de51515a998ce09f3b3430ffd69c18)) + + +### Features + +* do not override CSS Vars by newer runtimes ([#7703](https://github.com/SAP/ui5-webcomponents/issues/7703)) ([8379071](https://github.com/SAP/ui5-webcomponents/commit/8379071846f5f76b7f7257594269dc9e7e814478)) +* **ui5-combobox:** add attribute `no-typeahead` ([#7692](https://github.com/SAP/ui5-webcomponents/issues/7692)) ([4714835](https://github.com/SAP/ui5-webcomponents/commit/4714835990da6858f47462534b46978a9b0c65fc)) +* **ui5-panel:** enable custom styling of title ([#7688](https://github.com/SAP/ui5-webcomponents/issues/7688)) ([9d5a3d1](https://github.com/SAP/ui5-webcomponents/commit/9d5a3d1e95c7d163a91beb068169f2e7df39d4d5)) +* **ui5-rating-indicator:** introduce tooltip property ([#7687](https://github.com/SAP/ui5-webcomponents/issues/7687)) ([f2668b6](https://github.com/SAP/ui5-webcomponents/commit/f2668b6889259c7295b06fe47f846b434510f671)) +* update @ui5/webcomponents-icons to 5.07 & 4.19 ([#7708](https://github.com/SAP/ui5-webcomponents/issues/7708)) ([1732304](https://github.com/SAP/ui5-webcomponents/commit/173230467f93b227c37b54b666dcfcfec07bcab1)) + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **localization:** missing calendarWeekNumbering ([#7684](https://github.com/SAP/ui5-webcomponents/issues/7684)) ([01a9349](https://github.com/SAP/ui5-webcomponents/commit/01a9349c7ab5e3c046fa10034dc9aa99b840f3d0)) +* **ui5-avatar:** a11y fixed ([#7636](https://github.com/SAP/ui5-webcomponents/issues/7636)) ([15a84f8](https://github.com/SAP/ui5-webcomponents/commit/15a84f87fcdba3d7e60364205d2dbf7bf9bca0a9)) +* **ui5-avatar:** prevent hover effect on non-interactive avatars ([#7611](https://github.com/SAP/ui5-webcomponents/issues/7611)) ([8a782f1](https://github.com/SAP/ui5-webcomponents/commit/8a782f1a2f7cff5b26bd3338f4cf61186953539e)) +* **ui5-checkbox:** fix horizon hcb and hcw ([#7686](https://github.com/SAP/ui5-webcomponents/issues/7686)) ([cef8881](https://github.com/SAP/ui5-webcomponents/commit/cef88813e01a8117dc0c824dec17b7cf6e1a71e3)) +* **ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider:** special character support for id ([#7634](https://github.com/SAP/ui5-webcomponents/issues/7634)) ([993f2b7](https://github.com/SAP/ui5-webcomponents/commit/993f2b73196827f6558322a82f2e22e0f1bb1d84)), closes [#7633](https://github.com/SAP/ui5-webcomponents/issues/7633) +* **ui5-menu:** prevent bubbling in events ([#7653](https://github.com/SAP/ui5-webcomponents/issues/7653)) ([6f5caf4](https://github.com/SAP/ui5-webcomponents/commit/6f5caf49def230e716b7534f83f27249caade7d7)), closes [#7637](https://github.com/SAP/ui5-webcomponents/issues/7637) +* **ui5-page:** adjust Horizon themes ([#7685](https://github.com/SAP/ui5-webcomponents/issues/7685)) ([39ccfe6](https://github.com/SAP/ui5-webcomponents/commit/39ccfe63d07b74bb50eb46a419de34fa1461bc6c)) +* **ui5-shellbar:** apply correct height to horizon high contrast themes ([#7655](https://github.com/SAP/ui5-webcomponents/issues/7655)) ([b72f012](https://github.com/SAP/ui5-webcomponents/commit/b72f0124f9b3ebe74cceeaaaf69abd6711ced0e5)) +* **ui5-shellbar:** horizon theme update ([#7623](https://github.com/SAP/ui5-webcomponents/issues/7623)) ([ff04434](https://github.com/SAP/ui5-webcomponents/commit/ff04434c9c00b29367faff22d187edb55186eccd)) +* **ui5-shellbar:** often failing unit test ([#7677](https://github.com/SAP/ui5-webcomponents/issues/7677)) ([a14d57c](https://github.com/SAP/ui5-webcomponents/commit/a14d57c2c25c714983ee3cb0899c8ec72a677b55)), closes [#7673](https://github.com/SAP/ui5-webcomponents/issues/7673) +* **ui5-step-input:** align decrement icon ([#7654](https://github.com/SAP/ui5-webcomponents/issues/7654)) ([ce81085](https://github.com/SAP/ui5-webcomponents/commit/ce810853e707f682127ceb134011bb629859377a)) + + +### Features + +* **ui5-color-palette-item:** add selected state ([#7598](https://github.com/SAP/ui5-webcomponents/issues/7598)) ([6983f71](https://github.com/SAP/ui5-webcomponents/commit/6983f71acdaf3f94215d0fb86d9558db5b0b2887)) +* **ui5-illustrated-message:** enable vertical responsiveness ([#7672](https://github.com/SAP/ui5-webcomponents/issues/7672)) ([45244aa](https://github.com/SAP/ui5-webcomponents/commit/45244aacdc4fa846175d8a097ae242256e32a5b4)), closes [#6492](https://github.com/SAP/ui5-webcomponents/issues/6492) + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + + +### Bug Fixes + +* **framework:** stop bubbling of camel case events ([#7658](https://github.com/SAP/ui5-webcomponents/issues/7658)) ([6ce57f7](https://github.com/SAP/ui5-webcomponents/commit/6ce57f75684620021319edebb2d1f81f17ef2e57)) +* **ui5-calendar:** hide secondary type when same as primary ([#7650](https://github.com/SAP/ui5-webcomponents/issues/7650)) ([6ce7c33](https://github.com/SAP/ui5-webcomponents/commit/6ce7c3315c022c83d35b1121a50ef6fc4bb57dd7)) +* **ui5-label:** use correct i18n bundle & make component language aware ([#7652](https://github.com/SAP/ui5-webcomponents/issues/7652)) ([7b43587](https://github.com/SAP/ui5-webcomponents/commit/7b43587253e4873e49211a02a4a3923bc4a819f6)) + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package ui5-webcomponents + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + + +### Bug Fixes + +* **ui5-button:** update font params ([#7625](https://github.com/SAP/ui5-webcomponents/issues/7625)) ([b2ea9aa](https://github.com/SAP/ui5-webcomponents/commit/b2ea9aac43d296b777d1fcf8c1611fe75fdfb46d)) +* **ui5-list:** update horizon theme parameters ([#7614](https://github.com/SAP/ui5-webcomponents/issues/7614)) ([b0b8359](https://github.com/SAP/ui5-webcomponents/commit/b0b83597596248732f4bc92f968391aa67bb0355)) +* **ui5-media-gallery:** added new horizon theme parameters ([#7575](https://github.com/SAP/ui5-webcomponents/issues/7575)) ([25dbb4b](https://github.com/SAP/ui5-webcomponents/commit/25dbb4bd79890143021b9ecd3033665ea82cd6fa)) +* **ui5-message-strip:** remove button's custom width ([#7606](https://github.com/SAP/ui5-webcomponents/issues/7606)) ([bb8241a](https://github.com/SAP/ui5-webcomponents/commit/bb8241a94b4af5588c4583663da0f88490778cf7)) +* **ui5-multi-combobox:** correct usage of css var ([#7616](https://github.com/SAP/ui5-webcomponents/issues/7616)) ([c59c3bc](https://github.com/SAP/ui5-webcomponents/commit/c59c3bc1ccd130d36d1835450d8c7aaff8418e9c)) +* **ui5-slider:** adjust Horizon themes ([#7615](https://github.com/SAP/ui5-webcomponents/issues/7615)) ([4540766](https://github.com/SAP/ui5-webcomponents/commit/4540766a76595751323e2d2704f9fde69b80c36d)) +* **ui5-table:** improve Horizon styles ([#7609](https://github.com/SAP/ui5-webcomponents/issues/7609)) ([092537e](https://github.com/SAP/ui5-webcomponents/commit/092537e5616e23b88c46b93dc237593096c5c882)) + + +### Features + +* **ui5-time-picker:** mobile input and code optimization ([#7549](https://github.com/SAP/ui5-webcomponents/issues/7549)) ([50499ac](https://github.com/SAP/ui5-webcomponents/commit/50499ac1378deb18c18c649090591c0c36d44567)) + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + + +### Bug Fixes + +* **ui5-breadcrumbs:** infinite rerendering fixed ([#7589](https://github.com/SAP/ui5-webcomponents/issues/7589)) ([af8015b](https://github.com/SAP/ui5-webcomponents/commit/af8015b68a3a90cfec999863230d0f7b5298e206)) +* **ui5-button:** remove box shadows ([#7590](https://github.com/SAP/ui5-webcomponents/issues/7590)) ([555303a](https://github.com/SAP/ui5-webcomponents/commit/555303ab273fbe361c19de4ff5cf8dddddfd5e55)) +* **ui5-dialog:** fix background and shadow of slotted ui5-bar ([#7421](https://github.com/SAP/ui5-webcomponents/issues/7421)) ([2746460](https://github.com/SAP/ui5-webcomponents/commit/2746460ebd0d6517e8eedadde30b74e424c17a85)), closes [#7418](https://github.com/SAP/ui5-webcomponents/issues/7418) +* **ui5-input,ui5-page,ui5-rating-indicator,ui5-slider,ui5-textarea:** improve samples names ([#7588](https://github.com/SAP/ui5-webcomponents/issues/7588)) ([202ac76](https://github.com/SAP/ui5-webcomponents/commit/202ac768dd824bd5eea1cb8e4fc3e30301ab6f3b)) +* **ui5-input,ui5-textarea:** adjust disabled readonly visualisation ([#7568](https://github.com/SAP/ui5-webcomponents/issues/7568)) ([e97e35f](https://github.com/SAP/ui5-webcomponents/commit/e97e35f4570125965788a2c134022d7e289e4f81)) +* **ui5-input:** adjust button's size ([#7597](https://github.com/SAP/ui5-webcomponents/issues/7597)) ([b32dba1](https://github.com/SAP/ui5-webcomponents/commit/b32dba1dd5ca2874c4735bda8879b6ee82f149a9)) +* **ui5-input:** improve item announcement ([#7585](https://github.com/SAP/ui5-webcomponents/issues/7585)) ([292d15a](https://github.com/SAP/ui5-webcomponents/commit/292d15a0a7fcf468ecdfbff3048083b7014bf7c7)) +* **ui5-popover:** improve positioning when scrolling ([#7593](https://github.com/SAP/ui5-webcomponents/issues/7593)) ([a1b3bf6](https://github.com/SAP/ui5-webcomponents/commit/a1b3bf63875c04870e01ff715f603293a233444f)), closes [#7173](https://github.com/SAP/ui5-webcomponents/issues/7173) +* **ui5-segmented-button:** visual misalignments ([#7528](https://github.com/SAP/ui5-webcomponents/issues/7528)) ([d459fc2](https://github.com/SAP/ui5-webcomponents/commit/d459fc217bf6c63c1070743ea7d4447b08bdf2bc)) +* **ui5-switch:** fix text alignment in all themes ([#7416](https://github.com/SAP/ui5-webcomponents/issues/7416)) ([b4dea67](https://github.com/SAP/ui5-webcomponents/commit/b4dea675f5793c28ee9f0123d0e8bf6bd38c0b83)) +* **ui5-upload-collection-item:** align thumbnail to top ([#7582](https://github.com/SAP/ui5-webcomponents/issues/7582)) ([edeab49](https://github.com/SAP/ui5-webcomponents/commit/edeab49e3f7b63b3aee358983ea1fb9ff586ea3c)), closes [#7551](https://github.com/SAP/ui5-webcomponents/issues/7551) +* **ui5-upload-collеction:** align buttons to avoid extra space when size is small ([#7491](https://github.com/SAP/ui5-webcomponents/issues/7491)) ([6594cd5](https://github.com/SAP/ui5-webcomponents/commit/6594cd5df91f31f31efc740846670df4a1c1933d)) + + +### Features + +* add `secondaryCalendarType` global config ([#7547](https://github.com/SAP/ui5-webcomponents/issues/7547)) ([c9111a3](https://github.com/SAP/ui5-webcomponents/commit/c9111a38fc2a6cc54bb696dbdcec66100e304906)) +* **ui5-checkbox:** update horizon theme paramaters ([#7576](https://github.com/SAP/ui5-webcomponents/issues/7576)) ([4d144dd](https://github.com/SAP/ui5-webcomponents/commit/4d144dd76001cd2eed284629b12de9d99b64f383)) +* **ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input:** add wrapping in suggestions and n-more ([#7509](https://github.com/SAP/ui5-webcomponents/issues/7509)) ([21528a0](https://github.com/SAP/ui5-webcomponents/commit/21528a0ae5f3cec84d30362eba79bb6fa08a75d4)) +* **ui5-split-button:** adapt visual design with new parameters ([#7584](https://github.com/SAP/ui5-webcomponents/issues/7584)) ([28997c8](https://github.com/SAP/ui5-webcomponents/commit/28997c8468acf8e5b33a8c174cf9368c31310eb0)) + + +### Reverts + +* Revert "build: fix dev server page refresh" ([105db9f](https://github.com/SAP/ui5-webcomponents/commit/105db9f3c42e7434c2dc9b0eb967fb45cac9620d)) + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e391308629ff..3e3ccb7a81bf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ You are welcome to contribute code to the UI5 Web Components in order to fix bug There are three important things to know: 1. You must be aware of the Apache License (which describes contributions) and **accept the Developer Certificate of Origin**. -2. Follow our **[Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/contributing/conventions-and-guidelines/)**. +2. Follow our **[Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-contributing-conventions-and-guidelines--docs)**. 3. **Not all proposed contributions can be accepted**. Some features may just fit a third-party add-on better. The code must match the overall direction of the UI5 Web Components and improve it. So there should be some "bang for the byte". For most bug fixes this is a given, but a major feature implementation first needs to be discussed with one of the committers. Possibly, one who touched the related code or module recently. The more effort you invest, the better you should clarify in advance whether the contribution will match the project's direction. The best way would be to just open an enhancement ticket in the issue tracker to discuss the feature you plan to implement (make it clear that you intend to contribute). We will then forward the proposal to the respective code owner. This avoids disappointment. ## Developer Certificate of Origin (DCO) @@ -21,7 +21,7 @@ Due to legal reasons, contributors will be asked to accept a DCO before they sub 1. Make sure the change is welcome (see [General Remarks](#general-remarks)). 1. Create a branch by forking the relevant UI5 Web Components repository and apply your change. 1. Commit and push your change on that branch. - - **Please follow our [Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/contributing/conventions-and-guidelines/).** + - **Please follow our [Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-contributing-conventions-and-guidelines--docs).** 1. Create a pull request in the UI5 Web Components repository. 1. Follow the link posted by the CLA assistant to your pull request and accept it, as described above. 1. Wait for our code review and approval, possibly enhancing your change on request. diff --git a/README.md b/README.md index 50f8ad034da4..4fb99a6f04e0 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,11 @@ UI5 remains what it is: the best choice for… UI5 Web Components which makes using them in React even more comfortable. The current version of React (`react 18`) has some shortcomings when it comes to handling Custom Elements, namely the binding of `boolean` attributes as well as adding event listeners to custom event names like `selection-change`. With the help of UI5 Web Components for React, you can use the UI5 Web Components in React as if they were native React components. In addition to that, this library is also offering TypeScript definitions for all components, some complex layout components built on top of UI5 Web Components as well as Charting Components. +### UI5 Web Components for Angular + +[UI5 Web Components for Angular](https://github.com/SAP/ui5-webcomponents-ngx) is a wrapper implementation around +UI5 Web Components which to make it work with Angular without needing to use the `CUSTOM_ELEMENTS_SCHEMA` or `NO_ERRORS_SCHEMA` schemas. +Moreover, all Angular-specific features, such as two-way data binding and Angular Form support, work out of the box. ## How to Use @@ -84,9 +89,8 @@ shortcomings when it comes to handling Custom Elements, namely the binding of `b For more information, see [Importing UI5 Web Components](./docs/1-getting-started/02-importing-components.md) and [Understanding UI5 Web Components APIs](./docs/1-getting-started/03-understanding-components-APIs.md). ## Typescript Support -Since 1.11 we are providing Typescript definitions for all public APIs. -However, the **Typescript support is experimental and subject to change**. If you consume the web components via Typescript, you might have to adjust your code before the Typescript definitions become final and officially supported. -Please, share any kind of feedback about the provided types in GitHub. +TypeScript Support is enabled for both component development and component consumption. +Since version `1.11.0`, we have been providing TypeScript definitions under an experimental flag, and starting from version `1.19.0`, all TypeScript definitions are considered `stable`. ### Is there a CDN I can use? diff --git a/docs/1-getting-started/06-using-features.md b/docs/1-getting-started/06-using-features.md index 3c4b30b3e74b..2f48a83032af 100644 --- a/docs/1-getting-started/06-using-features.md +++ b/docs/1-getting-started/06-using-features.md @@ -16,7 +16,7 @@ Import the feature file from the respective NPM package: `import "@ui5//dist/features/.js` -## Component features +## Component features Currently, only a few components offer additional features: @@ -31,22 +31,28 @@ Currently, only a few components offer additional features: | `localization` | Multiple (`ui5-date-picker`, etc...) | `@ui5/webcomponents-localization/dist/features/calendar/Japanese.js` | Japanese calendar support | | `localization` | Multiple (`ui5-date-picker`, etc...) | `@ui5/webcomponents-localization/dist/features/calendar/Persian.js` | Persian calendar support | +Note: Features must be imported before all components modules, +so that the feature is enabled before the components' definition. + For example: ```js import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;"; + +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Input.js"; ``` -## Framework features +## Framework features | Package | Affects | Feature Import | Description | |----------------|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------| | `base` | Framework | `@ui5/webcomponents-base/dist/features/OpenUI5Support.js` | Integration with the OpenUI5 framework, allowing synchronization and resources re-use | | `base` | Multiple components within all libraries | `@ui5/webcomponents-base/dist/features/F6Navigation.js` | Support for F6 fast groups navigation | | `base` | Date related components | `@ui5/webcomponents-base/dist/features/LegacyDateFormats.js` | Support for legacy date formats | -| -Framework-level features must be imported before all components modules, +Note: Framework-level features must be imported before all components modules, so that the feature is enabled upon framework boot, before the components' definition. For example: diff --git a/docs/1-getting-started/07-typescript-support.md b/docs/1-getting-started/07-typescript-support.md index d3ad7cda4879..502f1ca5812d 100644 --- a/docs/1-getting-started/07-typescript-support.md +++ b/docs/1-getting-started/07-typescript-support.md @@ -1,9 +1,13 @@ # TypeScript Support -**Note: TypeScript support is experimental and subject to change**. If you consume the web components via TypeScript, you might have to adjust your code before the TypeScript definitions become final and officially supported. +**TypeScript Support is enabled for both component development and component consumption.** + +Since version `1.11.0`, we have been providing TypeScript definitions under an experimental flag, and starting from version `1.19.0`, all TypeScript definitions are considered `stable`. +With TypeScript definitions you will benefit from static code checks, autocompletion, and other expected features as expected in a TypeScript application. + + +**Note:** In exceptional cases, some of the available TypeScript types may change. In such instances, we will document all changes in a prominent manner within our release change log. -Since `1.11.0` we are providing `TypeScript definitions` (as `.d.ts` files) for all framework's and components' APIs, available to applications, written in TypeScript. Previously, without definitions, the usage of UI5 Web Components in TypeScript application was not optimal as the types have been missing and inferred by the TS compiler as `any`. -Now, when accessing a public API, you will benefit from static code checks, autocompletion, etc. as expected in a TypeScript app. **Example:** usage of `setLanguage` from `@ui5/webcomponents-base` diff --git a/docs/2-advanced/01-configuration.md b/docs/2-advanced/01-configuration.md index 74336a0d9e8c..07bea129a63d 100644 --- a/docs/2-advanced/01-configuration.md +++ b/docs/2-advanced/01-configuration.md @@ -22,11 +22,11 @@ There are several configuration settings that affect all UI5 Web Components glob The `theme` setting values above are the technical names of the supported themes: -- The `sap_horizon` is known as `Morning Horizon` and it's the latest theme currently available as a preview version. +- The `sap_horizon` is known as `Morning Horizon` and it's the latest theme and default theme. - The `sap_horizon_dark` is known as `Evening Horizon`. - The `sap_horizon_hcb` is known as `High Contrast Black`. - The `sap_horizon_hcw` is known as `High Contrast White`. -- The `sap_fiori_3` is known as `Quartz Light` and it`s the default theme. +- The `sap_fiori_3` is known as `Quartz Light`. - The `sap_fiori_3_dark` is known as `Quartz Dark`. - The `sap_fiori_3_hcb` is known as `Quartz High Contrast Black`. - The `sap_fiori_3_hcw` is known as `Quartz High Contrast White`. diff --git a/docs/4-frameworks/01-React.md b/docs/4-frameworks/01-React.md index f8fcf353bc6c..a9a6472e878d 100644 --- a/docs/4-frameworks/01-React.md +++ b/docs/4-frameworks/01-React.md @@ -2,7 +2,7 @@ In this tutorial, you will learn how to add UI5 Web Components to your application. You can add UI5 Web Components both to new React applications and to already existing ones. -**Important:** The get the best development experience, we recommend using the [UI5 Web Components for React](https://github.com/SAP/ui5-webcomponents-react) and follow the [UI5 Web Components for React Тutorial](https://developers.sap.com/mission.react-spa.html). UI5 Web Components for React library is a React implementation of UI5 Web Components which overcomes several limitations of React in handling web components in general, explained in the "Additional Info" section below. +**Important:** To get the best development experience, we recommend using the [UI5 Web Components for React](https://github.com/SAP/ui5-webcomponents-react) and follow the [UI5 Web Components for React Тutorial](https://developers.sap.com/mission.react-spa.html). UI5 Web Components for React library is a React implementation of UI5 Web Components which overcomes several limitations of React in handling web components in general, explained in the "Additional Info" section below. Here are the steps to use pure UI5 Web Components in React: diff --git a/docs/4-frameworks/02-Angular.md b/docs/4-frameworks/02-Angular.md index abc4af553272..62d5697d9177 100644 --- a/docs/4-frameworks/02-Angular.md +++ b/docs/4-frameworks/02-Angular.md @@ -1,6 +1,10 @@ # Get Started with UI5 Web Components & Angular -In this tutorial, you will learn how to add UI5 Web Components to your application. The UI5 Web Components can be added both to new Angular applications and to already existing ones. +In this tutorial, you will learn how to use `UI5 Web Components` in an Angular application. In the second part, we will introduce `UI5 Web Components for Angular` - wrapper library for UI5 Web Components, improving their integration with Angular. + +**Note:** To get the best development experience, we recommend using the [UI5 Web Components for Angular](https://ui5-webcomponents-ngx.netlify.app). The library removes the need for `CUSTOM_ELEMENTS_SCHEMA` and `NO_ERRORS_SCHEMA` schemas, and supports all Angular-specific features out-of-the-box. + +## UI5 Web Components ### Step 1. Install Angular CLI. @@ -10,26 +14,30 @@ npm install -g @angular/cli ### Step 2. Create a new Angular application. +Use the standard path to setup a new Angular app. + ```bash ng new ui5-web-components-application cd ui5-web-components-application ``` -### Step 3. Add UI5 Web Components. +### Step 3. Install UI5 Web Components. ```bash -npm install @ui5/webcomponents --save +npm install @ui5/webcomponents ``` -### Step 4. Allow the use of custom elements in Angular. +### Step 4. Allow Custom Elements in Angular. -Before using UI5 Web Components, you have to allow the use of custom elements in Angular. To do so, import CUSTOM_ELEMENTS_SCHEMA in ```app.module.ts``` : +Before using UI5 Web Components, you have to allow the use of custom elements via the `CUSTOM_ELEMENTS_SCHEMA`. This allows an NgModule to contain Non-Angular elements named with dash. + +- Import `CUSTOM_ELEMENTS_SCHEMA` in `app.module.ts`: ```js import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; ``` -After importing it, add it to the schemas array: +- Add `CUSTOM_ELEMENTS_SCHEMA` to the schemas array: ```js imports: [ @@ -40,13 +48,30 @@ schemas: [ ] ``` -### Step 5. Import the components you are going to use. +### Step 5. Import UI5 Web Components. + +Import the components you are going to use. + +Let's import the Button in `app.component.ts`: ```js -import "@ui5/webcomponents/dist/Button.js"; +import { Component } from '@angular/core'; + +import '@ui5/webcomponents/dist/Button.js'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', +}) +export class AppComponent { +} ``` -### Step 6. Use the imported elements in your application. +### Step 6. Use UI5 Web Components. + +Use the imported components in your application by their tag names - as any other HTML element. + +Let's add the button into the `app.component.html` template: ```html Hello world! @@ -58,73 +83,181 @@ import "@ui5/webcomponents/dist/Button.js"; ng serve -o ``` -## Additional Info +After the development server starts, the UI5 Web Components Button will be rendered in the test page. Now that you've seen how easy it is to use the UI5 Web Components, you can continue with adding more components in the same manner. + + +## UI5 Web Components For Angular + +UI5 Web Components for Angular is a wrapper library for UI5 Web Components. This means that for every UI5 Web Component, there is a corresponding Angular wrapper component available. -### Two-Way Data Binding +**For Example:** -You can use two-way data binding with the following components: CheckBox, RadioButton, Input, DatePicker, Switch, TextArea. -In order to use it, you have to use a library called [Origami](https://github.com/hotforfeature/origami) that provides advanced support for two-way data binding of custom elements. +- The native Button web component +```js +import '@ui5/webcomponents/dist/Button.js'; +``` + +- The "ngx" Button wrapper component +```js +import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button'; +``` -Example: +These wrappers supports all Angular-specific features out-of-the-box, f.e. two-way data binding with `NgModel`, as they are native to Angular. + +### Angular Form with `NgModel` + +The following section demonstrates how to build template-driven Angular form (following the oficial [Angular documentation](https://angular.io/guide/forms)) with UI5 Web Components For Angular. It illustrates the usage of two-way data binding to update the data model in the component as changes are made in the template and vice versa. + +### Step 1. Setup Angular project + +```bash +npm install -g @angular/cli +ng new ui5-web-components-ngx-application +cd ui5-web-components-ngx-application +``` + +### Step 2. Install UI5 Web Components for Angular. -#### 1. Install Origami. ```bash -npm install @codebakery/origami +npm install @ui5/webcomponents-ngx ``` -#### 2. Import the OrigamiFormsModule from Origami. +### Step 3. Build Angular form. + +To build an Angular Form, we will include the required infrastructure such as the `FormsModule`, track input validity and status using `ngModel` and make use of some form components from `@ui5/webcomponents-ngx`. + + +- Import `FormsModule` in `app.module.ts` and add it to the imports array. ```js -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; -import { OrigamiFormsModule } from '@codebakery/origami/forms'; + import { AppComponent } from './app.component'; @NgModule({ - imports: [BrowserModule, OrigamiFormsModule], - declarations: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + ], + providers: [], bootstrap: [AppComponent] }) -export class AppModule {} -``` - -#### 3. Use Origami in your template. - -```html - +export class AppModule { +} ``` -#### 4. Make Angular boot after UI5 Web Components are defined. +- Import `Label`, `Input` and `Button` components from `@ui5/webcomponents-ngx` in `app.module.ts` and add them to the imports array. -Add the ```APP_INITIALIZER``` provider to the module where you are using UI5 Web Components. In order to do so, import ```APP_INITIALIZER``` and add it to the providers array like this (in this example we will add it to the ```app.module.ts```): ```js -import { ..., APP_INITIALIZER } from '@angular/core'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; -import CheckBox from "@ui5/webcomponents/dist/CheckBox"; +import { AppComponent } from './app.component'; -function onAppInit(): () => Promise { - return (): Promise => { - return CheckBox.define(); - }; -} +// UI5 Web Components For Angular +import { LabelComponent } from '@ui5/webcomponents-ngx/main/label'; +import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button'; +import { InputComponent } from '@ui5/webcomponents-ngx/main/input'; @NgModule({ declarations: [ - ... + AppComponent ], imports: [ - ... - ], - providers: [ - { - provide: APP_INITIALIZER, - useFactory: onAppInit, - multi: true - }, + BrowserModule, + FormsModule, + LabelComponent, + InputComponent, + ButtonComponent ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ], + providers: [], bootstrap: [AppComponent] }) +export class AppModule { +} +``` + +### Step 4. Define a Data Model. + +- Add the following object, that will serve as a data model, to the `AppComponent`: + +```js +// app.component.ts +import { Component } from '@angular/core'; + +export class AppComponent { + model = { + firstName: "", + lastName: "" + }; +} +``` + +### Step 5. Create the Form UI. + +- Add the following inline template to the `AppComponent`. +- Bind form components to data properties using the `ngModel` directive and two-way data-binding syntax. +- Name form controls (e.g. add `name` attribute) to make them accessible to `ngModel`. + +```js +// app.component.ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: `

Form Works!

+ +
+
+ First Name: + +
+ +
+ Last Name: + +
+ + Submit + + Form Value: {{heroForm.value | json}} + Form Status: {{heroForm.status}} +
`, +}) +export class AppComponent { + model = { + firstName: "", + lastName: "" + }; +} +``` + +### Step 5. Launch the application. + +```bash +ng serve -o ``` + +After the development server starts, a simple form will be rendered in the test page. + +Initially, the model is empty and the form is invalid: + +```js +// Form Value: { "firstName": "", "lastName": "" } +// Form Status: "Invalid" +``` + +Start typing in the input fields and you will notice how the form model and form status are updated. + +Good job, the Form works! + +## Summary + +Angular provides good support of web components and `UI5 Web Components` are working perfectly in the majority of use-cases. However, for an enhanced development experience and better support for both template-driven and Reactive forms, the `UI5 Web Components for Angular` is the recommended choice. \ No newline at end of file diff --git a/docs/6-contributing/02-conventions-and-guidelines.md b/docs/6-contributing/02-conventions-and-guidelines.md index a9427ab4008c..73aea73a00d7 100644 --- a/docs/6-contributing/02-conventions-and-guidelines.md +++ b/docs/6-contributing/02-conventions-and-guidelines.md @@ -24,7 +24,7 @@ The commit header is the first line of the commit message. It consists of three - It must be one of the following: + `fix` - a bug fix (note: this will indicate a release). If possible, include a test in your change. + `feat` - a new feature (note: this will indicate a release) - + `docs` - documentation only changes + + `docs` - changes to the documentation or samples + `style` - changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) + `refactor` - a code change that neither fixes a bug nor adds a feature + `perf` - a code change that improves performance diff --git a/docs/internal/Toolbar.md b/docs/internal/Toolbar.md new file mode 100644 index 000000000000..7cd244a2e299 --- /dev/null +++ b/docs/internal/Toolbar.md @@ -0,0 +1,146 @@ +# Creating a web component abstract item to be used inside Toolbar + +*This section explains how to build abstract items in order to be compatible with UI5 Toolbar.* +*It will guide you through the process of how we created `ui5-toolbar-button`, to be +compatible with `ui5-toolbar`. Currently developed items can be used without those efforts. They are:* +1. ui5-toolbar-button +2. ui5-toolbar-select +3. ui5-toolbar-separator +4. ui5-toolbar-spacer + +## Abstract items +  +### Why are abstract items needed? +  +When the toolbar renders its slotted items within a popover in the static area, simply relocating the actual DOM nodes within its slots can lead to reference issues, causing the slotted nodes to lose their parent reference (e.g., the toolbar). This is the reason why the toolbar must operate with abstract items. Abstract items are not rendered directly within the DOM; instead, they function as data used by the toolbar to produce corresponding physical web components. On the other hand, useful modifications detected by the toolbar on the physical items are synchronised with the abstract ones. (see step [Events](#events)) +  +The `ui5-toolbar` is a composite web component, that slots different UI5 components, designing them as abstract items. They can contain +properties, slots and events, and they can match the API of already existing component. +In order to be suitable for usage inside `ui5-toolbar`, each component should adhere to following guidelines: + + +1. The component needs to implement a class with component name of the following type: + +```javascript +ToolbarButton.ts +``` + +2. The new component needs to implement two template files with name of the following type: + +```javascript +ToolbarButton.hbs and ToolbarPopoverButton.hbs +``` + +3. It needs to implement **customElement** decorator, which is good to contain custom tag name: + +```javascript +@customElement({ + tag: "ui5-toolbar-button" +}) +``` + +4. The class should extend **ToolbarItem** base class, which should also be added as a dependency. + +```javascript +class ToolbarButton extends ToolbarItem +``` + +5. Inside the module there should be two template getters: for toolbar and popover representation. + +```javascript +static get toolbarTemplate() { + return ToolbarButtonTemplate; +} + +static get toolbarPopoverTemplate() { + return ToolbarPopoverButtonTemplate; +} +``` + +6. After the class declaration there should be a registry call for the item inside the toolbar. **registerToolbarItem** helper should be added as a dependency. + +```javascript +import { registerToolbarItem } from "./ToolbarRegistry.js"; +``` + +```javascript +registerToolbarItem(ToolbarButton); +``` + +7. In the templates there should be mapping of the properties that need to be used in the component inside Toolbar. + +Inside ToolbarButton.ts: +  +```typescript +@property() +text!: string; +  +@property({ type: Boolean }) +disabled!: boolean; +``` +  +Inside ToolbarButtonTemplate.hbs: +  +```html + +  {{this.text}} + +``` +8. The new component's DOM root element needs to have `"ui5-tb-item"` CSS class in order to get default styles for item (margins etc.). +9. The new class needs to be added to the bundle file in the corresponding library. + +Inside bundle.common.js: +```javascript +import ToolbarButton from "./dist/ToolbarButton.js"; +``` +10. Use your newly created component inside the ui5-toolbar like this: + +```html + +  +  + +``` + +## Events +  +Abstract items can provide a map of events through the `subscribedEvents` getter. The toolbar will actively monitor these events on the physical items, and when triggered, it will also fire the information to the corresponding abstract item. This mechanism proves useful when the abstract item requires synchronization of changes or interactions with the physical items. Importantly, events described as public offer benefits to consumers of the abstract items informing them about interactions with the physical elements. Additionally, the map contains information about the popover, such as `preventClosing: true`, which ensures that the popover remains open when this event is triggered by the physical item. +  +A good example is the Map of the `ui5-toolbar-select`: +  +```javascript +get subscribedEvents() { +  const map = new Map(); +  +  map.set("click", { preventClosing: true }); +  map.set("change", { preventClosing: false }); +  map.set("open", { preventClosing: true }); +  map.set("close", { preventClosing: true }); +  +  return map; +} +``` +  +The `ui5-toolbar-select` then waits for the toolbar to fire the `change` event, in order to notify (synchronize) its `options` slots: +  +```ts +_onEventHandler(e: Event): void { +  if (e.type === "change") { +    // update options +    const selectedOption = (e as CustomEvent).detail.selectedOption; +    const selectedOptionIndex = Number(selectedOption?.getAttribute("data-ui5-external-action-item-index")); +    this.options.forEach((option: Option, index: number) => { +      if (index === selectedOptionIndex) { +        option.setAttribute("selected", ""); +      } else { +        option.removeAttribute("selected"); +      } +    }); +  } +} +``` \ No newline at end of file diff --git a/lerna.json b/lerna.json index ff338e618913..4bc6b7e7b3c3 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 4dfcdcb83f10..3b94cd5fdba2 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/CHANGELOG.md @@ -3,6 +3,122 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + + +### Bug Fixes + +* **ItemNavigation:** more than 1 ItemNavigation per component allowed ([#7798](https://github.com/SAP/ui5-webcomponents/issues/7798)) ([b1019af](https://github.com/SAP/ui5-webcomponents/commit/b1019aff6c4aced61458c1b718ffe0a3a7802ae2)) + + +### Features + +* **ui5-side-navigation:** added href and target properties ([#7682](https://github.com/SAP/ui5-webcomponents/issues/7682)) ([7530f00](https://github.com/SAP/ui5-webcomponents/commit/7530f00b589d0b95dcbee49f6ed980e9d36ba58b)) + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **framework:** use correct customElements registry ([#7760](https://github.com/SAP/ui5-webcomponents/issues/7760)) ([288f6d4](https://github.com/SAP/ui5-webcomponents/commit/288f6d4d6cee9dccf1c64fa12b3ead2920c6c08a)) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + + +### Bug Fixes + +* **ui5-color-picker:** fix hsl to rgb color conversion ([#7723](https://github.com/SAP/ui5-webcomponents/issues/7723)) ([4e95272](https://github.com/SAP/ui5-webcomponents/commit/4e9527225be27c957ea71f17a4cacb3bc065d6b7)), closes [#7660](https://github.com/SAP/ui5-webcomponents/issues/7660) + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + + +### Features + +* do not override CSS Vars by newer runtimes ([#7703](https://github.com/SAP/ui5-webcomponents/issues/7703)) ([8379071](https://github.com/SAP/ui5-webcomponents/commit/8379071846f5f76b7f7257594269dc9e7e814478)) + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + + +### Bug Fixes + +* **framework:** stop bubbling of camel case events ([#7658](https://github.com/SAP/ui5-webcomponents/issues/7658)) ([6ce57f7](https://github.com/SAP/ui5-webcomponents/commit/6ce57f75684620021319edebb2d1f81f17ef2e57)) + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + + +### Features + +* add `secondaryCalendarType` global config ([#7547](https://github.com/SAP/ui5-webcomponents/issues/7547)) ([c9111a3](https://github.com/SAP/ui5-webcomponents/commit/c9111a38fc2a6cc54bb696dbdcec66100e304906)) + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/webcomponents-base diff --git a/packages/base/README.md b/packages/base/README.md index 72a40927f82a..bd3aff7ca166 100644 --- a/packages/base/README.md +++ b/packages/base/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Base [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/base/package.json b/packages/base/package.json index 344390a70912..22787afb1dec 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -37,8 +37,8 @@ "devDependencies": { "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.18.0-rc.0", - "chromedriver": "116.0.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", + "chromedriver": "118.0.1", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", "cross-env": "^7.0.3", diff --git a/packages/base/src/ManagedStyles.ts b/packages/base/src/ManagedStyles.ts index 65c00598ce61..37312ea007d2 100644 --- a/packages/base/src/ManagedStyles.ts +++ b/packages/base/src/ManagedStyles.ts @@ -3,46 +3,104 @@ import createLinkInHead from "./util/createLinkInHead.js"; import { shouldUseLinks, getUrl } from "./CSP.js"; import { StyleData, StyleDataCSP } from "./types.js"; import { isSafari } from "./Device.js"; +import { getCurrentRuntimeIndex, compareRuntimes } from "./Runtimes.js"; const getStyleId = (name: string, value: string) => { return value ? `${name}|${value}` : name; }; -const createStyle = (data: StyleData, name: string, value = "") => { +const shouldUpdate = (runtimeIndex: string | undefined) => { + if (runtimeIndex === undefined) { + return true; + } + return compareRuntimes(getCurrentRuntimeIndex(), parseInt(runtimeIndex)) === 1; // 1 means the current is newer, 0 means the same, -1 means the resource's runtime is newer +}; + +const createStyle = (data: StyleData, name: string, value = "", theme?: string) => { const content = typeof data === "string" ? data : data.content; + const currentRuntimeIndex = getCurrentRuntimeIndex(); if (shouldUseLinks()) { const attributes = {} as Record; attributes[name] = value; + if (theme) { + attributes["data-ui5-runtime-index"] = currentRuntimeIndex; + attributes["data-ui5-theme"] = theme; + } const href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName); createLinkInHead(href, attributes); } else if (document.adoptedStyleSheets && !isSafari()) { const stylesheet = new CSSStyleSheet(); stylesheet.replaceSync(content); (stylesheet as Record)._ui5StyleId = getStyleId(name, value); // set an id so that we can find the style later + if (theme) { + (stylesheet as Record)._ui5RuntimeIndex = currentRuntimeIndex; + (stylesheet as Record)._ui5Theme = theme; + } document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet]; } else { const attributes = {} as Record; attributes[name] = value; + if (theme) { + attributes["data-ui5-runtime-index"] = currentRuntimeIndex; + attributes["data-ui5-theme"] = theme; + } createStyleInHead(content, attributes); } }; -const updateStyle = (data: StyleData, name: string, value = "") => { +const updateStyle = (data: StyleData, name: string, value = "", theme?: string) => { const content = typeof data === "string" ? data : data.content; + const currentRuntimeIndex = getCurrentRuntimeIndex(); if (shouldUseLinks()) { const link = document.querySelector(`head>link[${name}="${value}"]`) as HTMLLinkElement; - link.href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName); + const href = getUrl((data as StyleDataCSP).packageName, (data as StyleDataCSP).fileName); + + if (!theme) { + link.href = href; + } else { + const linkRuntimeIndex = link.getAttribute("data-ui5-runtime-index") || undefined; + const linkTheme = link.getAttribute("data-ui5-theme"); + if (linkTheme !== theme || shouldUpdate(linkRuntimeIndex)) { + link.href = href; + link.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex)); + link.setAttribute("data-ui5-theme", theme); + } + } } else if (document.adoptedStyleSheets && !isSafari()) { const stylesheet = document.adoptedStyleSheets.find(sh => (sh as Record)._ui5StyleId === getStyleId(name, value)); - if (stylesheet) { + if (!stylesheet) { + return; + } + + if (!theme) { stylesheet.replaceSync(content || ""); + } else { + const stylesheetRuntimeIndex: string | undefined = (stylesheet as Record)._ui5RuntimeIndex; + const stylesheetTheme: string | undefined = (stylesheet as Record)._ui5Theme; + if (stylesheetTheme !== theme || shouldUpdate(stylesheetRuntimeIndex)) { + stylesheet.replaceSync(content || ""); + (stylesheet as Record)._ui5RuntimeIndex = String(currentRuntimeIndex); + (stylesheet as Record)._ui5Theme = theme; + } } } else { const style = document.querySelector(`head>style[${name}="${value}"]`); - if (style) { + if (!style) { + return; + } + + if (!theme) { style.textContent = content || ""; + } else { + const styleRuntimeIndex = style.getAttribute("data-ui5-runtime-index") || undefined; + const styleTheme = style.getAttribute("data-ui5-theme"); + if (styleTheme !== theme || shouldUpdate(styleRuntimeIndex)) { + style.textContent = content || ""; + style.setAttribute("data-ui5-runtime-index", String(currentRuntimeIndex)); + style.setAttribute("data-ui5-theme", theme); + } } } }; @@ -71,11 +129,11 @@ const removeStyle = (name: string, value = "") => { } }; -const createOrUpdateStyle = (data: StyleData, name: string, value = "") => { +const createOrUpdateStyle = (data: StyleData, name: string, value = "", theme?: string) => { if (hasStyle(name, value)) { - updateStyle(data, name, value); + updateStyle(data, name, value, theme); } else { - createStyle(data, name, value); + createStyle(data, name, value, theme); } }; diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index e628b60310b4..23e65cf5b241 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -76,7 +76,7 @@ function _invalidate(this: UI5Element, changeInfo: ChangeInfo) { this._changedState.push(changeInfo); renderDeferred(this); - this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this }); + this._invalidationEventProvider.fireEvent("invalidate", { ...changeInfo, target: this }); } /** @@ -93,7 +93,8 @@ abstract class UI5Element extends HTMLElement { __id?: string; _suppressInvalidation: boolean; _changedState: Array; - _eventProvider: EventProvider; + _invalidationEventProvider: EventProvider; + _componentStateFinalizedEventProvider: EventProvider; _inDOM: boolean; _fullyConnected: boolean; _childChangeListeners: Map; @@ -101,7 +102,6 @@ abstract class UI5Element extends HTMLElement { _domRefReadyPromise: Promise & { _deferredResolve?: PromiseResolve }; _doNotSyncAttributes: Set; _state: State; - _onComponentStateFinalized?: () => void; _getRealDomRef?: () => HTMLElement; staticAreaItem?: StaticAreaItem; @@ -126,7 +126,8 @@ abstract class UI5Element extends HTMLElement { this._fullyConnected = false; // A flag telling whether the UI5Element's onEnterDOM hook was called (since it's possible to have the element removed from DOM before that) this._childChangeListeners = new Map(); // used to store lazy listeners per slot for the child change event of every child inside that slot this._slotChangeListeners = new Map(); // used to store lazy listeners per slot for the slotchange event of all slot children inside that slot - this._eventProvider = new EventProvider(); // used by parent components for listening to changes to child components + this._invalidationEventProvider = new EventProvider(); // used by parent components for listening to changes to child components + this._componentStateFinalizedEventProvider = new EventProvider(); // used by friend classes for synchronization let deferredResolve; this._domRefReadyPromise = new Promise(resolve => { deferredResolve = resolve; @@ -441,7 +442,7 @@ abstract class UI5Element extends HTMLElement { * @public */ attachInvalidate(callback: (param: InvalidationInfo) => void) { - this._eventProvider.attachEvent("invalidate", callback); + this._invalidationEventProvider.attachEvent("invalidate", callback); } /** @@ -451,7 +452,7 @@ abstract class UI5Element extends HTMLElement { * @public */ detachInvalidate(callback: (param: InvalidationInfo) => void) { - this._eventProvider.detachEvent("invalidate", callback); + this._invalidationEventProvider.detachEvent("invalidate", callback); } /** @@ -673,9 +674,7 @@ abstract class UI5Element extends HTMLElement { this.onBeforeRendering(); // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered - if (this._onComponentStateFinalized) { - this._onComponentStateFinalized(); - } + this._componentStateFinalizedEventProvider.fireEvent("componentStateFinalized"); // resume normal invalidation handling this._suppressInvalidation = false; @@ -817,7 +816,7 @@ abstract class UI5Element extends HTMLElement { const camelCaseEventName = kebabToCamelCase(name); if (camelCaseEventName !== name) { - return eventResult && this._fireEvent(camelCaseEventName, data, cancelable); + return eventResult && this._fireEvent(camelCaseEventName, data, cancelable, bubbles); } return eventResult; @@ -861,6 +860,26 @@ abstract class UI5Element extends HTMLElement { return getSlottedNodesList((this as unknown as Record>)[slotName]) as Array; } + /** + * Attach a callback that will be executed whenever the component's state is finalized + * + * @param {} callback + * @public + */ + attachComponentStateFinalized(callback: () => void) { + this._componentStateFinalizedEventProvider.attachEvent("componentStateFinalized", callback); + } + + /** + * Detach the callback that is executed whenever the component's state is finalized + * + * @param {} callback + * @public + */ + detachComponentStateFinalized(callback: () => void) { + this._componentStateFinalizedEventProvider.detachEvent("componentStateFinalized", callback); + } + /** * Determines whether the component should be rendered in RTL mode or not. * Returns: "rtl", "ltr" or undefined @@ -1118,7 +1137,7 @@ abstract class UI5Element extends HTMLElement { const tag = this.getMetadata().getTag(); const definedLocally = isTagRegistered(tag); - const definedGlobally = customElements.get(tag); + const definedGlobally = window.customElements.get(tag); if (definedGlobally && !definedLocally) { recordTagRegistrationFailure(tag); diff --git a/packages/base/src/delegate/ItemNavigation.ts b/packages/base/src/delegate/ItemNavigation.ts index c2468ceb279c..ca6566b3c23d 100644 --- a/packages/base/src/delegate/ItemNavigation.ts +++ b/packages/base/src/delegate/ItemNavigation.ts @@ -81,6 +81,8 @@ class ItemNavigation { _skipItemsSize: number | null; + _initBound: () => void; + /** * * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among) @@ -102,9 +104,8 @@ class ItemNavigation { this.rootWebComponent = rootWebComponent; this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this)); - this.rootWebComponent._onComponentStateFinalized = () => { - this._init(); - }; + this._initBound = this._init.bind(this); + this.rootWebComponent.attachComponentStateFinalized(this._initBound); if (typeof options.getItemsCallback !== "function") { throw new Error("getItemsCallback is required"); diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts index 7e6d59c4e747..b634d78017ce 100644 --- a/packages/base/src/features/OpenUI5Support.ts +++ b/packages/base/src/features/OpenUI5Support.ts @@ -54,6 +54,7 @@ type Theming = { type Formatting = { getCalendarType: () => string, getLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing, + getCustomIslamicCalendarData?: () => LegacyDateCalendarCustomizing, } type CalendarUtils = { @@ -137,7 +138,8 @@ class OpenUI5Support { calendarType: Formatting.getCalendarType(), formatSettings: { firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek, - legacyDateCalendarCustomizing: Formatting.getLegacyDateCalendarCustomizing(), + legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.() + ?? Formatting.getLegacyDateCalendarCustomizing?.(), }, }; } diff --git a/packages/base/src/theming/applyTheme.ts b/packages/base/src/theming/applyTheme.ts index 6e4688d6efb9..086b8b3a6610 100644 --- a/packages/base/src/theming/applyTheme.ts +++ b/packages/base/src/theming/applyTheme.ts @@ -22,7 +22,7 @@ const loadThemeBase = async (theme: string) => { const cssData = await getThemeProperties(BASE_THEME_PACKAGE, theme); if (cssData) { - createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE); + createOrUpdateStyle(cssData, "data-ui5-theme-properties", BASE_THEME_PACKAGE, theme); } }; diff --git a/packages/base/src/util/ColorConversion.ts b/packages/base/src/util/ColorConversion.ts index 82cd083d5241..d3e4da2a500b 100644 --- a/packages/base/src/util/ColorConversion.ts +++ b/packages/base/src/util/ColorConversion.ts @@ -241,70 +241,78 @@ const RGBStringToRGBObject = (color: string): ColorRGB => { const HSLToRGB = (color: ColorHSL): ColorRGB => { // Formula taken from https://www.rapidtables.com/convert/color/hsl-to-rgb.html - const C = (1 - Math.abs((2 * color.l) - 1)) * color.s, - X = C * (1 - Math.abs(((color.h / 60) % 2) - 1)), - m = color.l - C / 2; + let saturation = color.s * 100, + lightness = color.l * 100, + red, + green, + blue; + + if (saturation > 100) { + saturation = 1; + } else if (saturation < 0) { + saturation = 0; + } else { + saturation /= 100; + } - let tempColor: ColorRGB; - switch (Math.round(color.h / 60)) { - // 0 ≤ H < 60 + if (lightness > 100) { + lightness = 1; + } else if (lightness < 0) { + lightness = 0; + } else { + lightness /= 100; + } + + const hue = color.h, + d = saturation * (1 - Math.abs(2 * lightness - 1)), + m = 255 * (lightness - 0.5 * d), + x = d * (1 - Math.abs(((hue / 60) % 2) - 1)), + i = Math.floor(hue / 60), + m255x = m + 255 * x, + m255d = m + 255 * d; + + switch (i) { case 0: - tempColor = { - r: C, - g: X, - b: 0, - }; + red = m255d; + green = m255x; + blue = m; break; - - // 60 ≤ H < 120 case 1: - tempColor = { - r: X, - g: C, - b: 0, - }; + red = m255x; + green = m255d; + blue = m; break; - - // 120 ≤ H < 180 case 2: - tempColor = { - r: 0, - g: C, - b: X, - }; + red = m; + green = m255d; + blue = m255x; break; - - // 180 ≤ H < 240 case 3: - tempColor = { - r: 0, - g: X, - b: C, - }; + red = m; + green = m255x; + blue = m255d; break; - - // 240 ≤ H < 300 case 4: - tempColor = { - r: X, - g: 0, - b: C, - }; + red = m255x; + green = m; + blue = m255d; + break; + case 5: + red = m255d; + green = m; + blue = m255x; break; - - // 300 ≤ H < 360 default: - tempColor = { - r: C, - g: 0, - b: X, - }; + red = 0; + green = 0; + blue = 0; + break; } return { - r: Math.floor((tempColor.r + m) * 255), - g: Math.floor((tempColor.g + m) * 255), - b: Math.floor((tempColor.b + m) * 255), + r: Math.round(red), + g: Math.round(green), + b: Math.round(blue), }; }; diff --git a/packages/base/test/assets/Themes.js b/packages/base/test/assets/Themes.js index 9e24398bcc03..97d4cba93f11 100644 --- a/packages/base/test/assets/Themes.js +++ b/packages/base/test/assets/Themes.js @@ -1,5 +1,12 @@ import { registerThemePropertiesLoader } from "../../dist/asset-registries/Themes.js"; +const defaultTheme = { + content: `:root{ --var1: grey; }`, + packageName: "", + fileName: "", +}; + + const fiori3 = { content: `:root{ --var1: red; }`, packageName: "", @@ -42,6 +49,7 @@ const fiori3Hcw = { fileName: "", }; +registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_horizon", () => defaultTheme); registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3", () => fiori3); registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_fiori_3_dark", () => fiori3Dark); registerThemePropertiesLoader("@ui5/webcomponents-base-test", "sap_belize", () => belize); diff --git a/packages/base/test/assets/bundle.light.js b/packages/base/test/assets/bundle.light.js index 9787bb6e602e..08bc0aa853a8 100644 --- a/packages/base/test/assets/bundle.light.js +++ b/packages/base/test/assets/bundle.light.js @@ -13,7 +13,7 @@ boot(); const testAssets = { // registerThemePropertiesLoader after boot (and after attachBoot ), will call applyTheme registerThemeProps: async () => { - registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_fiori_3", () => { + registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", () => { return { content: `:root{ --customCol: #fff; --customBg: #000; }`, packageName: "", diff --git a/packages/base/test/specs/Theming.spec.js b/packages/base/test/specs/Theming.spec.js index 40e8470b013e..fc5612080520 100644 --- a/packages/base/test/specs/Theming.spec.js +++ b/packages/base/test/specs/Theming.spec.js @@ -11,7 +11,7 @@ describe("Theming works", () => { const bundle = window['sap-ui-webcomponents-bundle']; const dataPropAttr = `data-ui5-component-properties-${bundle.getCurrentRuntimeIndex()}`; const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`).cssRules[0].cssText - done(style && style.includes("--var1: red")); // see test/assets/Themes.js + done(style && style.includes("--var1: grey")); // see test/assets/Themes.js }); assert.strictEqual(res, true, "The fiori3 vars are found"); @@ -42,7 +42,7 @@ describe("Theming works", () => { const bundle = window['sap-ui-webcomponents-bundle']; const dataPropAttr = `data-ui5-component-properties-${bundle.getCurrentRuntimeIndex()}`; const style = document.adoptedStyleSheets.find(sh => sh._ui5StyleId === `${dataPropAttr}|@ui5/webcomponents-base-test`).cssRules[0].cssText - const varsFound = style && style.includes("--var1: red"); // "red" for fiori3 - see test/assets/Themes.js + const varsFound = style && style.includes("--var1: grey"); // "grey" for horizon - see test/assets/Themes.js done(varsFound); }); diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md index ffb7b5cf0ae6..9da7efc03271 100644 --- a/packages/create-package/CHANGELOG.md +++ b/packages/create-package/CHANGELOG.md @@ -3,6 +3,94 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/create-webcomponents-package diff --git a/packages/create-package/README.md b/packages/create-package/README.md index 3ea2f0e9c1f9..f0d7aaac2edc 100644 --- a/packages/create-package/README.md +++ b/packages/create-package/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Create Package [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/create-package/package.json b/packages/create-package/package.json index aac18455192d..4cfbcf189f8f 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: create package", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md index a8a812d0f10d..5981f94b21ff 100644 --- a/packages/fiori/CHANGELOG.md +++ b/packages/fiori/CHANGELOG.md @@ -3,6 +3,126 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Features + +* **ui5-illustrated-message:** titleLevel property added ([#7771](https://github.com/SAP/ui5-webcomponents/issues/7771)) ([2883c58](https://github.com/SAP/ui5-webcomponents/commit/2883c587f367e51e0f08065498b990f86e60e88c)), closes [#7037](https://github.com/SAP/ui5-webcomponents/issues/7037) + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + + +### Features + +* **ui5-illustrated-message:** added new TNT illustrations ([#7773](https://github.com/SAP/ui5-webcomponents/issues/7773)) ([03f28b9](https://github.com/SAP/ui5-webcomponents/commit/03f28b90df0b2a28c0f09f67caaa0a5a1e63c4f3)) +* **ui5-side-navigation:** added href and target properties ([#7682](https://github.com/SAP/ui5-webcomponents/issues/7682)) ([7530f00](https://github.com/SAP/ui5-webcomponents/commit/7530f00b589d0b95dcbee49f6ed980e9d36ba58b)) + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **ui5-view-settings-dialog:** improve settings management ([#7769](https://github.com/SAP/ui5-webcomponents/issues/7769)) ([33cdb86](https://github.com/SAP/ui5-webcomponents/commit/33cdb86b34a3cb6e1b849a186a8c8c1652eb5bca)), closes [#7752](https://github.com/SAP/ui5-webcomponents/issues/7752) + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + + +### Bug Fixes + +* **ui5-flexible-column-layout:** wrong focus fixed ([#7586](https://github.com/SAP/ui5-webcomponents/issues/7586)) ([721cc0b](https://github.com/SAP/ui5-webcomponents/commit/721cc0b312fb76142dea97712b21343b7b93337e)) + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **ui5-page:** adjust Horizon themes ([#7685](https://github.com/SAP/ui5-webcomponents/issues/7685)) ([39ccfe6](https://github.com/SAP/ui5-webcomponents/commit/39ccfe63d07b74bb50eb46a419de34fa1461bc6c)) +* **ui5-shellbar:** apply correct height to horizon high contrast themes ([#7655](https://github.com/SAP/ui5-webcomponents/issues/7655)) ([b72f012](https://github.com/SAP/ui5-webcomponents/commit/b72f0124f9b3ebe74cceeaaaf69abd6711ced0e5)) +* **ui5-shellbar:** horizon theme update ([#7623](https://github.com/SAP/ui5-webcomponents/issues/7623)) ([ff04434](https://github.com/SAP/ui5-webcomponents/commit/ff04434c9c00b29367faff22d187edb55186eccd)) +* **ui5-shellbar:** often failing unit test ([#7677](https://github.com/SAP/ui5-webcomponents/issues/7677)) ([a14d57c](https://github.com/SAP/ui5-webcomponents/commit/a14d57c2c25c714983ee3cb0899c8ec72a677b55)), closes [#7673](https://github.com/SAP/ui5-webcomponents/issues/7673) + + +### Features + +* **ui5-illustrated-message:** enable vertical responsiveness ([#7672](https://github.com/SAP/ui5-webcomponents/issues/7672)) ([45244aa](https://github.com/SAP/ui5-webcomponents/commit/45244aacdc4fa846175d8a097ae242256e32a5b4)), closes [#6492](https://github.com/SAP/ui5-webcomponents/issues/6492) + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + + +### Bug Fixes + +* **ui5-media-gallery:** added new horizon theme parameters ([#7575](https://github.com/SAP/ui5-webcomponents/issues/7575)) ([25dbb4b](https://github.com/SAP/ui5-webcomponents/commit/25dbb4bd79890143021b9ecd3033665ea82cd6fa)) + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + + +### Bug Fixes + +* **ui5-dialog:** fix background and shadow of slotted ui5-bar ([#7421](https://github.com/SAP/ui5-webcomponents/issues/7421)) ([2746460](https://github.com/SAP/ui5-webcomponents/commit/2746460ebd0d6517e8eedadde30b74e424c17a85)), closes [#7418](https://github.com/SAP/ui5-webcomponents/issues/7418) +* **ui5-upload-collection-item:** align thumbnail to top ([#7582](https://github.com/SAP/ui5-webcomponents/issues/7582)) ([edeab49](https://github.com/SAP/ui5-webcomponents/commit/edeab49e3f7b63b3aee358983ea1fb9ff586ea3c)), closes [#7551](https://github.com/SAP/ui5-webcomponents/issues/7551) +* **ui5-upload-collеction:** align buttons to avoid extra space when size is small ([#7491](https://github.com/SAP/ui5-webcomponents/issues/7491)) ([6594cd5](https://github.com/SAP/ui5-webcomponents/commit/6594cd5df91f31f31efc740846670df4a1c1933d)) + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) diff --git a/packages/fiori/README.md b/packages/fiori/README.md index ab8c1f6ee853..d4fd1c7345fa 100644 --- a/packages/fiori/README.md +++ b/packages/fiori/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Fiori [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 1df51e7b893e..850c0a852142 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.18.0-rc.0", - "@ui5/webcomponents-base": "1.18.0-rc.0", - "@ui5/webcomponents-icons": "1.18.0-rc.0", - "@ui5/webcomponents-theming": "1.18.0-rc.0", + "@ui5/webcomponents": "1.20.0-rc.1", + "@ui5/webcomponents-base": "1.20.0-rc.1", + "@ui5/webcomponents-icons": "1.20.0-rc.1", + "@ui5/webcomponents-theming": "1.20.0-rc.1", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.0", - "chromedriver": "116.0.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1", + "chromedriver": "118.0.1" } } diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts index 2bad152b0816..70b4d323b01e 100644 --- a/packages/fiori/src/Bar.ts +++ b/packages/fiori/src/Bar.ts @@ -71,16 +71,6 @@ class Bar extends UI5Element { /** * Defines the component's design. * - *

- * Note: - * Available options are: - *
    - *
  • Header
    • - *
  • Subheader
    • - *
  • Footer
    • - *
  • FloatingFooter
    • - *
- * * @type {sap.ui.webc.fiori.types.BarDesign} * @name sap.ui.webc.fiori.Bar.prototype.design * @defaultvalue "Header" @@ -90,7 +80,7 @@ class Bar extends UI5Element { design!: `${BarDesign}` /** - * Defines the content at the start of the bar + * Defines the content at the start of the bar. * @type {HTMLElement[]} * @name sap.ui.webc.fiori.Bar.prototype.startContent * @slot @@ -100,7 +90,7 @@ class Bar extends UI5Element { startContent!: Array; /** - * Defines the content in the middle of the bar + * Defines the content in the middle of the bar. * @type {HTMLElement[]} * @name sap.ui.webc.fiori.Bar.prototype.default * @slot middleContent @@ -110,7 +100,7 @@ class Bar extends UI5Element { middleContent!: Array /** - * Defines the content at the end of the bar + * Defines the content at the end of the bar. * @type {HTMLElement[]} * @name sap.ui.webc.fiori.Bar.prototype.endContent * @slot diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs index ad05e6f95dd1..77c16dc5269e 100644 --- a/packages/fiori/src/DynamicPage.hbs +++ b/packages/fiori/src/DynamicPage.hbs @@ -1,33 +1,27 @@
- {{#if showHeaderInStickArea}} - {{#unless headerSnapped}} - - - {{/unless}} + {{#if headerInTitle}} + {{/if}} - {{#if headerSnapped}} - + {{#if actionsInTitle}} + {{/if}} +
- {{#unless showHeaderInStickArea}} + {{#if headerInContent}} - {{/unless}} - {{#unless headerSnapped}} + {{/if}} + + {{#unless actionsInTitle}} {{/unless}} +
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts index 5889a216f342..930cfc2e4a72 100644 --- a/packages/fiori/src/DynamicPage.ts +++ b/packages/fiori/src/DynamicPage.ts @@ -101,6 +101,16 @@ class DynamicPage extends UI5Element { return this.querySelector("[ui5-dynamic-page-header]"); } + get actionsInTitle(): boolean { + return this.headerSnapped || this.showHeaderInStickArea || this.headerPinned; + } + get headerInTitle(): boolean { + return !this.headerSnapped && (this.showHeaderInStickArea || this.headerPinned); + } + get headerInContent(): boolean { + return !this.headerSnapped && !this.headerInTitle; + } + snapOnScroll() { this._debounce(() => { if (!this.dynamicPageTitle || !this.dynamicPageHeader) { @@ -136,6 +146,7 @@ class DynamicPage extends UI5Element { } this.isExpanding = true; + this.headerPinned = false; } onPinClick() { diff --git a/packages/fiori/src/FlexibleColumnLayout.hbs b/packages/fiori/src/FlexibleColumnLayout.hbs index 39a104c4ad31..88ba0deaa5cb 100644 --- a/packages/fiori/src/FlexibleColumnLayout.hbs +++ b/packages/fiori/src/FlexibleColumnLayout.hbs @@ -6,7 +6,7 @@ aria-labelledby="{{_id}}-startColumnText" > {{accStartColumnText}} - +
@@ -20,7 +20,7 @@ aria-labelledby="{{_id}}-midColumnText" > {{accMiddleColumnText}} - +
@@ -34,7 +34,7 @@ aria-labelledby="{{_id}}-endColumnText" > {{accEndColumnText}} - +
diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 8eecc1f85eaa..8fbea6757ef3 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -173,19 +173,6 @@ class FlexibleColumnLayout extends UI5Element { * Note: The layout also depends on the screen size - one column for screens smaller than 599px, * two columns between 599px and 1023px and three columns for sizes bigger than 1023px. *

- * Available options are: - *
    - *
  • OneColumn
    • - *
  • TwoColumnsStartExpanded
    • - *
  • TwoColumnsMidExpanded
    • - *
  • ThreeColumnsMidExpanded
    • - *
  • ThreeColumnsEndExpanded
    • - *
  • ThreeColumnsStartExpandedEndHidden
    • - *
  • ThreeColumnsMidExpandedEndHidden
    • - *
  • MidColumnFullScreen
    • - *
  • EndColumnFullScreen
    • - *
- *

* For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns * in 67%/33% proportion. * @type {sap.ui.webc.fiori.types.FCLLayout} diff --git a/packages/fiori/src/IllustratedMessage.hbs b/packages/fiori/src/IllustratedMessage.hbs index 7871e6c49f3c..14a36b98b7e7 100644 --- a/packages/fiori/src/IllustratedMessage.hbs +++ b/packages/fiori/src/IllustratedMessage.hbs @@ -6,7 +6,7 @@ {{#if hasFormattedTitle}} {{else}} - {{effectiveTitleText}} + {{effectiveTitleText}} {{/if}} {{/if}} diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index 203ea2fb90ec..30832e3e8691 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -9,6 +9,7 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import Title from "@ui5/webcomponents/dist/Title.js"; +import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import IllustrationMessageSize from "./types/IllustrationMessageSize.js"; import IllustrationMessageType from "./types/IllustrationMessageType.js"; @@ -81,103 +82,6 @@ class IllustratedMessage extends UI5Element { /** * Defines the illustration name that will be displayed in the component. *

- * Available illustrations are: - *
    - *
  • AddColumn
    • - *
  • AddPeople
    • - *
  • AddDimensions
    • - *
  • BalloonSky
    • - *
  • BeforeSearch
    • - *
  • Connection
    • - *
  • EmptyCalendar
    • - *
  • EmptyList
    • - *
  • EmptyPlanningCalendar
    • - *
  • ErrorScreen
    • - *
  • FilterTable
    • - *
  • GroupTable
    • - *
  • NoActivities
    • - *
  • NoColumnsSet
    • - *
  • NoData
    • - *
  • NoEntries
    • - *
  • NoFilterResults
    • - *
  • NoMail_v1
    • - *
  • NoMail
    • - *
  • NoNotifications
    • - *
  • NoSavedItems_v1
    • - *
  • NoSavedItems
    • - *
  • NoSearchResults
    • - *
  • NoTasks_v1
    • - *
  • NoTasks
    • - *
  • NoDimensionsSet
    • - *
  • PageNotFound
    • - *
  • ReloadScreen
    • - *
  • ResizeColumn
    • - *
  • SearchEarth
    • - *
  • SearchFolder
    • - *
  • SimpleBalloon
    • - *
  • SimpleBell
    • - *
  • SimpleCalendar
    • - *
  • SimpleCheckMark
    • - *
  • SimpleConnection
    • - *
  • SimpleEmptyDoc
    • - *
  • SimpleEmptyList
    • - *
  • SimpleError
    • - *
  • SimpleMagnifier
    • - *
  • SimpleMail
    • - *
  • SimpleNoSavedItems
    • - *
  • SimpleNotFoundMagnifier
    • - *
  • SimpleReload
    • - *
  • SimpleTask
    • - *
  • SleepingBell
    • - *
  • SortColumn
    • - *
  • SuccessBalloon
    • - *
  • SuccessCheckMark
    • - *
  • SuccessHighFive
    • - *
  • SuccessScreen
    • - *
  • Survey
    • - *
  • Tent
    • - *
  • UnableToLoad
    • - *
  • UnableToLoadImage
    • - *
  • UnableToUpload
    • - *
  • UploadToCloud
    • - *
  • UploadCollection
    • - *
  • TntChartArea
    • - *
  • TntChartArea2
    • - *
  • TntChartBar
    • - *
  • TntChartBPMNFlow
    • - *
  • TntChartBullet
    • - *
  • TntChartDoughnut
    • - *
  • TntChartFlow
    • - *
  • TntChartGantt
    • - *
  • TntChartOrg
    • - *
  • TntChartPie
    • - *
  • TntCodePlaceholder
    • - *
  • TntCompany
    • - *
  • TntComponents
    • - *
  • TntExternalLink
    • - *
  • TntFaceID
    • - *
  • TntFingerprint
    • - *
  • TntLock
    • - *
  • TntMission
    • - *
  • TntNoApplications
    • - *
  • TntNoFlows
    • - *
  • TntNoUsers
    • - *
  • TntRadar
    • - *
  • TntSecrets
    • - *
  • TntServices
    • - *
  • TntSessionExpired
    • - *
  • TntSessionExpiring
    • - *
  • TntSuccess
    • - *
  • TntSuccessfulAuth
    • - *
  • TntSystems
    • - *
  • TntTeams
    • - *
  • TntTools
    • - *
  • TntUnableToLoad
    • - *
  • TntUnlock
    • - *
  • TntUnsuccessfulAuth
    • - *
  • TntUser2
    • - *
- *

* Note: By default the BeforeSearch illustration is loaded. *
* When using an illustration type, other than the default, it should be loaded in addition: @@ -199,14 +103,6 @@ class IllustratedMessage extends UI5Element { /** * Determines which illustration breakpoint variant is used. *

- * Available options are: - *
    - *
  • Auto
    • - *
  • Base
    • - *
  • Spot
    • - *
  • Dialog
    • - *
  • Scene
    • - *
* * As IllustratedMessage adapts itself around the Illustration, the other * elements of the component are displayed differently on the different breakpoints/illustration sizes. @@ -258,6 +154,20 @@ class IllustratedMessage extends UI5Element { @property({ defaultValue: "" }) accessibleNameRef!: string; + /** + * Defines the semantic level of the title. + * + * Note: Used for accessibility purposes only. + * + * @type {sap.ui.webc.main.types.TitleLevel} + * @defaultvalue "H2" + * @name sap.ui.webc.fiori.IllustratedMessage.prototype.titleLevel + * @public + * @since 1.20.0 + */ + @property({ type: TitleLevel, defaultValue: TitleLevel.H2 }) + titleLevel!: `${TitleLevel}`; + /** * Illustration breakpoint variant for the Spot size. * @@ -336,6 +246,7 @@ class IllustratedMessage extends UI5Element { static i18nBundle: I18nBundle; _lastKnownOffsetWidthForMedia: Record; + _lastKnownOffsetHeightForMedia: Record; _lastKnownMedia: string; _handleResize: ResizeObserverCallback; @@ -345,6 +256,7 @@ class IllustratedMessage extends UI5Element { this._handleResize = this.handleResize.bind(this); // this will store the last known offsetWidth of the IllustratedMessage DOM node for a given media (e.g. "Spot") this._lastKnownOffsetWidthForMedia = {}; + this._lastKnownOffsetHeightForMedia = {}; // this will store the last known media, in order to detect if IllustratedMessage has been hidden by expand/collapse container this._lastKnownMedia = "base"; } @@ -361,6 +273,14 @@ class IllustratedMessage extends UI5Element { }; } + static get BREAKPOINTS_HEIGHT() { + return { + DIALOG: 451, + SPOT: 296, + BASE: 87, + }; + } + static get MEDIA() { return { BASE: "base", @@ -407,31 +327,43 @@ class IllustratedMessage extends UI5Element { handleResize() { if (this.size !== IllustrationMessageSize.Auto) { + this._adjustHeightToFitContainer(); return; } this._applyMedia(); + window.requestAnimationFrame(this._adjustHeightToFitContainer.bind(this)); } - _applyMedia() { - const currOffsetWidth = this.offsetWidth; + _applyMedia(heightChange?: boolean) { + const currOffsetWidth = this.offsetWidth, + currOffsetHeight = this.offsetHeight; + + const size = heightChange ? currOffsetHeight : currOffsetWidth, + oBreakpounts = heightChange ? IllustratedMessage.BREAKPOINTS_HEIGHT : IllustratedMessage.BREAKPOINTS; let newMedia = ""; - if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.BASE) { + if (size <= oBreakpounts.BASE) { newMedia = IllustratedMessage.MEDIA.BASE; - } else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.SPOT) { + } else if (size <= oBreakpounts.SPOT) { newMedia = IllustratedMessage.MEDIA.SPOT; - } else if (this.offsetWidth <= IllustratedMessage.BREAKPOINTS.DIALOG) { + } else if (size <= oBreakpounts.DIALOG) { newMedia = IllustratedMessage.MEDIA.DIALOG; } else { newMedia = IllustratedMessage.MEDIA.SCENE; } - const lastKnownOffsetWidth = this._lastKnownOffsetWidthForMedia[newMedia]; + const lastKnownOffsetWidth = this._lastKnownOffsetWidthForMedia[newMedia], + lastKnownOffsetHeight = this._lastKnownOffsetHeightForMedia[newMedia]; // prevents infinite resizing, when same width is detected for the same media, // excluding the case in which, the control is placed inside expand/collapse container - if (!(lastKnownOffsetWidth && currOffsetWidth === lastKnownOffsetWidth) || this._lastKnownOffsetWidthForMedia[this._lastKnownMedia] === 0) { + if (!(lastKnownOffsetWidth && currOffsetWidth === lastKnownOffsetWidth + && lastKnownOffsetHeight && currOffsetHeight === lastKnownOffsetHeight) + || this._lastKnownOffsetWidthForMedia[this._lastKnownMedia] === 0 + || this._lastKnownOffsetHeightForMedia[this._lastKnownMedia] === 0 + || this._lastKnownMedia !== newMedia) { this.media = newMedia; this._lastKnownOffsetWidthForMedia[newMedia] = currOffsetWidth; + this._lastKnownOffsetHeightForMedia[newMedia] = currOffsetHeight; this._lastKnownMedia = newMedia; } } @@ -447,6 +379,19 @@ class IllustratedMessage extends UI5Element { } } + _adjustHeightToFitContainer() { + const illustrationWrapper = this.shadowRoot!.querySelector(".ui5-illustrated-message-illustration"), + illustration = illustrationWrapper.querySelector("svg"); + + if (illustration) { + illustrationWrapper.classList.toggle("ui5-illustrated-message-illustration-fit-content", false); + if (this.getDomRef()!.scrollHeight > this.getDomRef()!.offsetHeight) { + illustrationWrapper.classList.toggle("ui5-illustrated-message-illustration-fit-content", true); + this._applyMedia(true /* height change */); + } + } + } + onAfterRendering() { this._setSVGAccAttrs(); } diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index 48a35046209b..f3dba1e4f176 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -158,13 +158,6 @@ class MediaGallery extends UI5Element { /** * Determines the layout of the component. - *

- * Available options are: - *
    - *
  • Auto
    • - *
  • Vertical
    • - *
  • Horizontal
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} * @name sap.ui.webc.fiori.MediaGallery.prototype.layout @@ -177,12 +170,6 @@ class MediaGallery extends UI5Element { /** * Determines the horizontal alignment of the thumbnails menu * vs. the central display area. - *

- * Available options are: - *
    - *
  • Left
    • - *
  • Right
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign} * @name sap.ui.webc.fiori.MediaGallery.prototype.menuHorizontalAlign @@ -195,12 +182,6 @@ class MediaGallery extends UI5Element { /** * Determines the vertical alignment of the thumbnails menu * vs. the central display area. - *

- * Available options are: - *
    - *
  • Top
    • - *
  • Bottom
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign} * @name sap.ui.webc.fiori.MediaGallery.prototype.menuVerticalAlign @@ -214,12 +195,6 @@ class MediaGallery extends UI5Element { * Determines the actual applied layout type * (esp. needed when the app did not specify a fixed layout type * but selected Auto layout type). - *

- * Possible values are: - *
    - *
  • Vertical
    • - *
  • Horizontal
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} * @defaultvalue "Vertical" diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs index d01642551704..e17f9e2d2905 100644 --- a/packages/fiori/src/SideNavigation.hbs +++ b/packages/fiori/src/SideNavigation.hbs @@ -1,95 +1,51 @@ - + {{else}} +
    + {{#each items}} + {{> treeitem }} {{/each}} - +
{{/if}} -
- - {{#if fixedItems.length}} -
-
- + {{#if hasFixedItems}} + + {{#if collapsed}} + - - {{#each _fixedItems}} - - {{#unless ../collapsed}} - {{#each this.item.items}} - - - {{/each}} - {{/unless}} - + {{#each fixedItems}} + {{> treeitem }} {{/each}} - -
+ + {{/if}} {{/if}} - - {{> footer }} -
+ {{#*inline header}} {{#if showHeader}} @@ -97,4 +53,161 @@ {{/if}} {{/inline}} -{{#*inline footer}}{{/inline}} +{{#*inline menuitem}} + {{#if _href}} + + +
{{text}}
+ + {{else}} +
+ +
{{text}}
+
+ {{/if}} +{{/inline}} + +{{#*inline treeitem}} +
  • + {{#if _href}} + + {{#if icon}} + + {{/if}} +
    {{text}}
    + + {{#if items.length}} + + {{/if}} +     + {{else}} +
    + {{#if icon}} + + {{/if}} +
    {{text}}
    + + {{#if items.length}} + + {{/if}} +
    + {{/if}} + {{#if items.length}} + + {{/if}} +
    • +{{/inline}} diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index fd8597eff7ac..039712ccf896 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -7,11 +7,19 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import List from "@ui5/webcomponents/dist/List.js"; -import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js"; -import Tree from "@ui5/webcomponents/dist/Tree.js"; -import TreeItem from "@ui5/webcomponents/dist/TreeItem.js"; -import type { TreeItemClickEventDetail } from "@ui5/webcomponents/dist/Tree.js"; +import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import { + isPhone, + isTablet, + isCombi, +} from "@ui5/webcomponents-base/dist/Device.js"; +import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import "@ui5/webcomponents-icons/dist/circle-task-2.js"; +import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js"; +import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js"; +import type SideNavigationItemBase from "./SideNavigationItemBase.js"; import SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationSubItem from "./SideNavigationSubItem.js"; import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js"; @@ -19,38 +27,31 @@ import SideNavigationPopoverTemplate from "./generated/templates/SideNavigationP import { SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT, SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC, - SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC, SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC, - SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC, } from "./generated/i18n/i18n-defaults.js"; // Styles import SideNavigationCss from "./generated/themes/SideNavigation.css.js"; import SideNavigationPopoverCss from "./generated/themes/SideNavigationPopover.css.js"; +const PAGE_UP_DOWN_SIZE = 10; + type SideNavigationPopoverContents = { - mainItem: SideNavigationItem, - mainItemSelected: boolean, - selectedSubItemIndex: number, + item: SideNavigationItem, subItems: Array, }; -type TSideNavigationItem = SideNavigationItem | SideNavigationSubItem; - type SideNavigationSelectionChangeEventDetail = { - item: TSideNavigationItem; + item: SideNavigationItemBase; }; -type ItemHasAssociatedItemField = { - item: { - associatedItem: TSideNavigationItem +// used for the inner side navigation used in the SideNavigationPopoverTemplate +type PopupClickEventDetail = { + target: { + associatedItem: SideNavigationItemBase } }; -// used for the inner side navigation used in the SideNavigationPopoverTemplate -type InnerSideNavigationSelectionChangeEventDetail = SideNavigationSelectionChangeEventDetail & ItemHasAssociatedItemField; -type InnerTreeClickEventDetail = TreeItemClickEventDetail & ItemHasAssociatedItemField; - /** * @class * @@ -105,20 +106,17 @@ type InnerTreeClickEventDetail = TreeItemClickEventDetail & ItemHasAssociatedIte styles: SideNavigationCss, staticAreaStyles: SideNavigationPopoverCss, dependencies: [ - List, - StandardListItem, - Tree, - TreeItem, ResponsivePopover, SideNavigationItem, SideNavigationSubItem, + Icon, ], }) /** * Fired when the selection has changed via user interaction * * @event sap.ui.webc.fiori.SideNavigation#selection-change - * @param {sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem} item the clicked item. + * @param {sap.ui.webc.fiori.SideNavigationItemBase} item the clicked item. * @allowPreventDefault * @public */ @@ -139,19 +137,13 @@ class SideNavigation extends UI5Element { @property({ type: Boolean }) collapsed!: boolean; - /** - * @private - */ - @property({ type: Object }) - _popoverContents!: SideNavigationPopoverContents; - /** * Defines the main items of the ui5-side-navigation. Use the ui5-side-navigation-item component * for the top-level items, and the ui5-side-navigation-sub-item component for second-level items, nested * inside the items. * * @public - * @type {sap.ui.webc.fiori.ISideNavigationItem[]} + * @type {sap.ui.webc.fiori.SideNavigationItem[]} * @slot items * @name sap.ui.webc.fiori.SideNavigation.prototype.default */ @@ -180,49 +172,41 @@ class SideNavigation extends UI5Element { * Note: In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items) * * @public - * @type {sap.ui.webc.fiori.ISideNavigationItem[]} + * @type {sap.ui.webc.fiori.SideNavigationItem[]} * @slot fixedItems * @name sap.ui.webc.fiori.SideNavigation.prototype.fixedItems */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) fixedItems!: Array; - static i18nBundle: I18nBundle; + /** + * @private + */ + @property({ type: Object }) + _popoverContents!: SideNavigationPopoverContents; - get _items() { - return this.items.map(this._createTreeItem); - } + @property({ type: Boolean }) + _inPopover!: boolean; - get _fixedItems() { - return this.fixedItems.map(this._createTreeItem); - } + _flexibleItemNavigation: ItemNavigation; + _fixedItemNavigation: ItemNavigation; - _createTreeItem = (item: SideNavigationItem): { item: SideNavigationItem, selected: boolean } => { - return { - item, - selected: (item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected, - }; - } + static i18nBundle: I18nBundle; - _setSelectedItem(item: TSideNavigationItem) { - if (!this.fireEvent("selection-change", { item }, true)) { - return; - } + constructor() { + super(); - this._walk(current => { - current.selected = false; + this._flexibleItemNavigation = new ItemNavigation(this, { + skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items + navigationMode: NavigationMode.Vertical, + getItemsCallback: () => this.getEnabledFlexibleItems(), }); - item.selected = true; - } - _buildPopoverContent(item: SideNavigationItem) { - this._popoverContents = { - mainItem: item, - mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected), - // add one as the first item is the main item - selectedSubItemIndex: item.items.findIndex(subItem => subItem.selected) + 1, - subItems: item.items, - }; + this._fixedItemNavigation = new ItemNavigation(this, { + skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items + navigationMode: NavigationMode.Vertical, + getItemsCallback: () => this.getEnabledFixedItems(), + }); } async _onAfterOpen() { @@ -230,8 +214,12 @@ class SideNavigation extends UI5Element { // item navigation index should be managed, because items are // dynamically recreated and tabIndexes are not updated const tree = await this.getPickerTree(); - const index = this._popoverContents.selectedSubItemIndex; - tree.focusItemByIndex(index); + const selectedItem = tree._findSelectedItem(tree.items); + if (selectedItem) { + selectedItem.focus(); + } else { + tree.items[0]?.focus(); + } } get accSideNavigationPopoverHiddenText() { @@ -247,55 +235,16 @@ class SideNavigation extends UI5Element { return SideNavigation.i18nBundle.getText(key); } - get ariaRoleDescNavigationListItem() { - let key = SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC; - if (this.collapsed) { - key = SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC; - } - - return SideNavigation.i18nBundle.getText(key); - } - - handleTreeItemClick(e: CustomEvent) { - const treeItem = e.detail.item; - const item = treeItem.associatedItem; - - if (item instanceof SideNavigationItem && !item.wholeItemToggleable) { - item.fireEvent("click"); - } else if (item instanceof SideNavigationSubItem) { - item.fireEvent("click"); - } else { - item.expanded = !item.expanded; - } - - if (item.selected && !this.collapsed) { - return; - } - - if (this.collapsed && item instanceof SideNavigationItem && item.items.length) { - this._buildPopoverContent(item); - - let tree = this._itemsTree; - if (tree !== e.target as Tree) { - tree = this._fixedItemsTree; - } - - this.openPicker(tree!._getListItemForTreeItem(treeItem)!); - } else if (!item.selected) { - this._setSelectedItem(item); - } - } - - handleInnerSelectionChange(e: CustomEvent) { - const item = e.detail.item; - const { associatedItem } = item; + handlePopupItemClick(e: PopupClickEventDetail) { + const associatedItem = e.target.associatedItem; associatedItem.fireEvent("click"); if (associatedItem.selected) { + this.closePicker(); return; } - this._setSelectedItem(associatedItem); + this._selectItem(associatedItem); this.closePicker(); } @@ -315,8 +264,7 @@ class SideNavigation extends UI5Element { async getPickerTree() { const picker = await this.getPicker(); - const sideNav = picker.querySelector("[ui5-side-navigation]")!; - return sideNav._itemsTree!; + return picker.querySelector("[ui5-side-navigation]")!; } get hasHeader() { @@ -327,30 +275,166 @@ class SideNavigation extends UI5Element { return this.hasHeader && !this.collapsed; } - get _itemsTree() { - return this.getDomRef()!.querySelector("#ui5-sn-items-tree"); + get hasFixedItems() { + return !!this.fixedItems.length; + } + + get _rootRole() { + return this._inPopover ? "none" : undefined; + } + + get classes() { + return { + root: { + "ui5-sn-phone": isPhone(), + "ui5-sn-tablet": isTablet(), + "ui5-sn-combi": isCombi(), + "ui5-sn-collapsed": this.collapsed, + "ui5-sn-in-popover": this._inPopover, + }, + }; + } + + getEnabledFixedItems() : Array { + return this.getEnabledItems(this.fixedItems); + } + + getEnabledFlexibleItems() : Array { + return this.getEnabledItems(this.items); + } + + getEnabledItems(items: Array) : Array { + let result = new Array(); + + items.forEach(item => { + if (!item.disabled) { + result.push(item); + } + + if (!this.collapsed && item.expanded) { + result = result.concat(item.items.filter(el => !el.disabled)); + } + }); + + return result; + } + + focusItem(item: SideNavigationItemBase) { + if (item.isFixedItem) { + this._fixedItemNavigation.setCurrentItem(item); + } else { + this._flexibleItemNavigation.setCurrentItem(item); + } + } + + onAfterRendering() { + const activeElement = this.shadowRoot!.activeElement; + const flexibleDom = this.shadowRoot!.querySelector(".ui5-sn-flexible")!; + if (!flexibleDom.contains(activeElement)) { + const selectedItem = this._findSelectedItem(this.items); + if (selectedItem) { + this._flexibleItemNavigation.setCurrentItem(selectedItem); + } else { + const focusedItem = this._findFocusedItem(this.items); + if (!focusedItem) { + this._flexibleItemNavigation.setCurrentItem(this.items[0]); + } + } + } + + const fixedDom = this.shadowRoot!.querySelector(".ui5-sn-fixed"); + if (!fixedDom?.contains(activeElement)) { + const selectedItem = this._findSelectedItem(this.fixedItems); + if (selectedItem) { + this._fixedItemNavigation.setCurrentItem(selectedItem); + } else { + const focusedItem = this._findFocusedItem(this.fixedItems); + if (!focusedItem) { + this._fixedItemNavigation.setCurrentItem(this.fixedItems[0]); + } + } + } } - get _fixedItemsTree() { - return this.getDomRef()!.querySelector("#ui5-sn-fixed-items-tree"); + _findFocusedItem(items: Array) : SideNavigationItemBase | undefined { + let focusedItem; + + if (this.collapsed) { + focusedItem = items.find(item => item._tabIndex === "0"); + } else { + focusedItem = this._getWithNestedItems(items, true).find(item => item._tabIndex === "0"); + } + + return focusedItem; } - _walk(callback: (current: TSideNavigationItem) => void) { - this.items.forEach(current => { - callback(current); + _getWithNestedItems(items: Array, expandedOnly = false): Array { + let result = new Array(); - current.items.forEach(currentSubitem => { - callback(currentSubitem); - }); + items.forEach(item => { + result.push(item); + + if (!expandedOnly || item.expanded) { + result = result.concat(item.items); + } }); - this.fixedItems.forEach(current => { - callback(current); + return result; + } + + _findSelectedItem(items: Array) : SideNavigationItemBase | undefined { + let selectedItem; - current.items.forEach(currentSubitem => { - callback(currentSubitem); - }); + if (this.collapsed) { + selectedItem = items.find(item => item._selected); + } else { + selectedItem = this._getWithNestedItems(items).find(current => current.selected); + } + + return selectedItem; + } + + _handleItemClick(e: KeyboardEvent | PointerEvent, item: SideNavigationItemBase) { + if (item.selected && !this.collapsed) { + item.fireEvent("click"); + return; + } + + if (this.collapsed && item instanceof SideNavigationItem && item.items.length) { + e.preventDefault(); + + this._popoverContents = { + item, + subItems: item.items, + }; + + this.openPicker(item.getFocusDomRef() as HTMLElement); + } else { + item.fireEvent("click"); + + if (!item.selected) { + this._selectItem(item); + } + } + } + + _selectItem(item: SideNavigationItemBase) { + if (item.disabled) { + return; + } + + if (!this.fireEvent("selection-change", { item }, true)) { + return; + } + + let items = this._getWithNestedItems(this.items); + items = items.concat(this._getWithNestedItems(this.fixedItems)); + + items.forEach(current => { + current.selected = false; }); + + item.selected = true; } static async onDefine() { diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index 4261cc080026..b9f0a5d4b97d 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -1,9 +1,8 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; -import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js"; +import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js"; +import SideNavigationItemBase from "./SideNavigationItemBase.js"; import type SideNavigation from "./SideNavigation.js"; import type SideNavigationSubItem from "./SideNavigationSubItem.js"; @@ -22,7 +21,7 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js"; * @constructor * @author SAP SE * @alias sap.ui.webc.fiori.SideNavigationItem - * @extends sap.ui.webc.base.UI5Element + * @extends sap.ui.webc.fiori.SideNavigationItemBase * @abstract * @tagname ui5-side-navigation-item * @public @@ -30,41 +29,7 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js"; * @since 1.0.0-rc.8 */ @customElement("ui5-side-navigation-item") -/** - * Fired when the component is activated either with a - * click/tap or by using the Enter or Space key. - * - * @event sap.ui.webc.fiori.SideNavigationItem#click - * @public - */ -@event("click") -class SideNavigationItem extends UI5Element { - /** - * Defines the text of the item. - * - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.text - */ - @property() - text!: string; - - /** - * Defines the icon of the item. - *

    - * - * The SAP-icons font provides numerous options. - *
    - * See all the available icons in the Icon Explorer. - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.icon - */ - @property() - icon!: string; - +class SideNavigationItem extends SideNavigationItemBase { /** * Defines if the item is expanded * @@ -76,42 +41,6 @@ class SideNavigationItem extends UI5Element { @property({ type: Boolean }) expanded!: boolean; - /** - * Defines whether the subitem is selected - * - * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.selected - */ - @property({ type: Boolean }) - selected!: boolean; - - /** - * Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). - * If set to true, pressing the whole item will toggle the sub items, and it won't fire the click event. - * By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon. - * - * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.wholeItemToggleable - * @since 1.0.0-rc.11 - */ - @property({ type: Boolean }) - wholeItemToggleable!: boolean; - - /** - * Defines the tooltip of the component. - * @type {string} - * @defaultvalue "" - * @private - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.title - * @since 1.0.0-rc.16 - */ - @property() - title!: string; - /** * Defines if the item should be collapsible or not. * It is true, for example, for the items inside the Popover of the Side Navigation @@ -135,17 +64,114 @@ class SideNavigationItem extends UI5Element { @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) items!: Array; - get _tooltip() { - return this.title || this.text; - } + /** + * Defines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present). + * If set to true, clicking the whole item will toggle the sub items, and it won't fire the click event. + * By default, only clicking the arrow icon will toggle the sub items. + * + * @public + * @type {boolean} + * @defaultvalue false + * @name sap.ui.webc.fiori.SideNavigationItem.prototype.wholeItemToggleable + * @since 1.0.0-rc.11 + */ + @property({ type: Boolean }) + wholeItemToggleable!: boolean; get _ariaHasPopup() { - if ((this.parentNode as SideNavigation).collapsed && this.items.length) { - return HasPopup.Tree; + if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) { + return "tree"; } return undefined; } + + get _groupId() { + if (!this.items.length) { + return undefined; + } + + return `${this._id}-group`; + } + + get _expanded() { + if (!this.items.length) { + return undefined; + } + + return this.expanded; + } + + get _toggleIconName() { + return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow"; + } + + get classesArray() { + const classes = super.classesArray; + + if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) { + classes.push("ui5-sn-item-with-expander"); + } + + if (this._fixed) { + classes.push("ui5-sn-item-fixed"); + } + + return classes; + } + + get _selected() { + if (this.sideNavigation?.collapsed) { + return this.selected || this.items.some(item => item.selected); + } + + return this.selected; + } + + get isFixedItem() { + return this.slot === "fixedItems"; + } + + _onToggleClick = (e: PointerEvent) => { + e.stopPropagation(); + + this.expanded = !this.expanded; + } + + _onkeydown = (e: KeyboardEvent) => { + if (isLeft(e)) { + this.expanded = false; + return; + } + + if (isRight(e)) { + this.expanded = true; + return; + } + + super._onkeydown(e); + } + + _onkeyup = (e: KeyboardEvent) => { + super._onkeyup(e); + } + + _onfocusin = (e: FocusEvent) => { + super._onfocusin(e); + } + + _onclick = (e: PointerEvent) => { + if (!this.sideNavigation?.collapsed + && this.wholeItemToggleable + && e.pointerType === "mouse") { + e.preventDefault(); + e.stopPropagation(); + this.expanded = !this.expanded; + return; + } + + super._onclick(e); + } } SideNavigationItem.define(); diff --git a/packages/fiori/src/SideNavigationItemBase.ts b/packages/fiori/src/SideNavigationItemBase.ts new file mode 100644 index 000000000000..d1d55a759469 --- /dev/null +++ b/packages/fiori/src/SideNavigationItemBase.ts @@ -0,0 +1,237 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import type SideNavigation from "./SideNavigation.js"; + +/** + * @class + * A class to serve as a foundation + * for the SideNavigationItem and SideNavigationSubItem classes. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.fiori.SideNavigationItemBase + * @extends sap.ui.webc.base.UI5Element + * @abstract + * @public + * @implements sap.ui.webc.fiori.SideNavigationItemBase + * @since 1.19.0 + */ + +/** + * Fired when the component is activated either with a + * click/tap or by using the Enter or Space key. + * + * @event sap.ui.webc.fiori.SideNavigationItemBase#click + * @public + */ +@event("click") +class SideNavigationItemBase extends UI5Element implements ITabbable { + /** + * Defines the text of the item. + * + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.text + */ + @property() + text!: string; + + /** + * Defines the icon of the item. + *

    + * + * The SAP-icons font provides numerous options. + *
    + * See all the available icons in the Icon Explorer. + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.icon + */ + @property() + icon!: string; + + /** + * Defines whether the item is selected + * + * @public + * @type {boolean} + * @defaultvalue false + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.selected + */ + @property({ type: Boolean }) + selected!: boolean; + + /** + * Defines the link target URI. Supports standard hyperlink behavior. + * If a JavaScript action should be triggered, + * this should not be set, but instead an event handler + * for the click event should be registered. + * + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.href + * @since 1.19.0 + */ + @property() + href!: string; + + /** + * Defines the component target. + *

    + * Notes: + * + *
      + *
    • _self
      • + *
    • _top
      • + *
    • _blank
      • + *
    • _parent
      • + *
    • _search
      • + *
    + * + * This property must only be used when the href property is set. + * + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.target + * @since 1.19.0 + */ + @property() + target!: string; + + /** + * Defines whether the component is disabled. + * A disabled component can't be pressed or + * focused, and it is not in the tab chain. + * + * @type {boolean} + * @name sap.ui.webc.main.SideNavigationItemBase.prototype.disabled + * @defaultvalue false + * @public + * @since 1.19.0 + */ + @property({ type: Boolean }) + disabled!: boolean; + + /** + * Defines the tooltip of the component. + * @type {string} + * @defaultvalue "" + * @private + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.title + * @since 1.0.0-rc.16 + */ + @property() + title!: string; + + @property({ defaultValue: "-1", noAttribute: true }) + _tabIndex!: string; + + get _tooltip() { + return this.title || this.text; + } + + get _href() { + return (!this.disabled && this.href) ? this.href : undefined; + } + + get _target() { + return (!this.disabled && this.target) ? this.target : undefined; + } + + get _selected() { + return this.selected; + } + + get classesArray() { + const classes = []; + + if (this.disabled) { + classes.push("ui5-sn-item-disabled"); + } + + if (this._selected) { + classes.push("ui5-sn-item-selected"); + } + + return classes; + } + + get _classes() { + return this.classesArray.join(" "); + } + + get _ariaCurrent() { + if (!this.selected) { + return undefined; + } + + return "page"; + } + + get _effectiveTabIndex() { + if (this.disabled) { + return undefined; + } + + return this._tabIndex; + } + + get sideNavigation() : SideNavigation | undefined { + let parentElement = this.parentElement; + + while (parentElement) { + if (parentElement.hasAttribute("ui5-side-navigation")) { + return parentElement as SideNavigation; + } + + parentElement = parentElement.parentElement; + } + } + + getDomRef() { + return this.sideNavigation?.shadowRoot!.querySelector(`#${this._id}`) as HTMLElement; + } + + _onkeydown(e: KeyboardEvent) { + if (isSpace(e)) { + e.preventDefault(); + } + + if (isEnter(e)) { + this._activate(e); + } + } + + _onkeyup(e: KeyboardEvent) { + if (isSpace(e)) { + this._activate(e); + } + } + + _onclick(e: PointerEvent) { + this._activate(e); + } + + get isFixedItem() { + return true; + } + + _onfocusin(e: FocusEvent) { + e.stopPropagation(); + + this.sideNavigation?.focusItem(this); + } + + _activate(e: KeyboardEvent | PointerEvent) { + this.sideNavigation?._handleItemClick(e, this); + } +} + +export default SideNavigationItemBase; diff --git a/packages/fiori/src/SideNavigationPopover.hbs b/packages/fiori/src/SideNavigationPopover.hbs index c60371e6dda4..0a7747a7a232 100644 --- a/packages/fiori/src/SideNavigationPopover.hbs +++ b/packages/fiori/src/SideNavigationPopover.hbs @@ -1,30 +1,35 @@ {{accSideNavigationPopoverHiddenText}} - - {{#each _popoverContents.subItems}} {{/each}} diff --git a/packages/fiori/src/SideNavigationSubItem.ts b/packages/fiori/src/SideNavigationSubItem.ts index 5b89dc63f5f3..e25936c70197 100644 --- a/packages/fiori/src/SideNavigationSubItem.ts +++ b/packages/fiori/src/SideNavigationSubItem.ts @@ -1,7 +1,5 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import SideNavigationItemBase from "./SideNavigationItemBase.js"; /** * @class @@ -25,65 +23,25 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; * @since 1.0.0-rc.8 */ @customElement("ui5-side-navigation-sub-item") -/** - * Fired when the component is activated either with a - * click/tap or by using the Enter or Space key. - * - * @event sap.ui.webc.fiori.SideNavigationSubItem#click - * @public - */ -@event("click") -class SideNavigationSubItem extends UI5Element { - /** - * Defines the text of the item. - * - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.text - */ - @property() - text!: string; +class SideNavigationSubItem extends SideNavigationItemBase { + get isFixedItem() { + return this.parentElement?.slot === "fixedItems"; + } - /** - * Defines whether the subitem is selected. - * - * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.selected - */ - @property({ type: Boolean }) - selected!: boolean; + _onkeydown = (e: KeyboardEvent) => { + super._onkeydown(e); + } - /** - * Defines the icon of the item. - *

    - * - * The SAP-icons font provides numerous options. - *
    - * See all the available icons in the Icon Explorer. - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.icon - */ - @property() - icon!: string; + _onkeyup = (e: KeyboardEvent) => { + super._onkeyup(e); + } - /** - * Defines the tooltip of the component. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.title - * @private - * @since 1.0.0-rc.16 - */ - @property() - title!: string + _onfocusin = (e: FocusEvent) => { + super._onfocusin(e); + } - get _tooltip() { - return this.title || this.text; + _onclick = (e: PointerEvent) => { + super._onclick(e); } } diff --git a/packages/fiori/src/UploadCollectionItem.hbs b/packages/fiori/src/UploadCollectionItem.hbs index ac05109cef36..df025c3b8a92 100644 --- a/packages/fiori/src/UploadCollectionItem.hbs +++ b/packages/fiori/src/UploadCollectionItem.hbs @@ -1,11 +1,10 @@ {{>include "../../main/src/ListItem.hbs"}} {{#*inline "listItemContent"}} -
    - -
    - -
    +
    +
    + +
    {{#if _editing}} @@ -46,65 +45,66 @@
    {{/if}}
    -
    - {{#if _editing}} +
    + +
    + {{#if _editing}} + {{_renameBtnText}} + {{_cancelRenameBtnText}} + {{else}} + {{#if _showRetry}} {{_renameBtnText}} + icon="refresh" + design="Transparent" + tooltip="{{_retryButtonTooltip}}" + @click="{{_onRetry}}" + @keyup="{{_onRetryKeyup}}" + > + {{/if}} + {{#if _showTerminate}} {{_cancelRenameBtnText}} - {{else}} - {{#if _showRetry}} - - {{/if}} - {{#if _showTerminate}} - - - {{/if}} + icon="stop" + design="Transparent" + tooltip="{{_terminateButtonTooltip}}" + @click="{{_onTerminate}}" + @keyup="{{_onTerminateKeyup}}"> + + {{/if}} - {{#if showEditButton}} - - - {{/if}} + {{#if showEditButton}} + + + {{/if}} - {{#if renderUploadCollectionDeleteButton}} - - {{/if}} + {{#if renderUploadCollectionDeleteButton}} + {{/if}} -
    + {{/if}}
    {{/inline}} \ No newline at end of file diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index f2e2a791f97f..1055d6693f52 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -7,6 +7,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; import Dialog from "@ui5/webcomponents/dist/Dialog.js"; import Button from "@ui5/webcomponents/dist/Button.js"; import Label from "@ui5/webcomponents/dist/Label.js"; @@ -290,6 +291,12 @@ class ViewSettingsDialog extends UI5Element { } } + onInvalidation(changeInfo: ChangeInfo) { + if (changeInfo.type === "slot") { + this._confirmedSettings = this._settings; + } + } + _setAdditionalTexts() { // Add the additional text to the filter options this.filterItems.forEach((filter, index) => { diff --git a/packages/fiori/src/Wizard.hbs b/packages/fiori/src/Wizard.hbs index ff477052c20b..aa9f5c4e6b0a 100644 --- a/packages/fiori/src/Wizard.hbs +++ b/packages/fiori/src/Wizard.hbs @@ -1,4 +1,4 @@ -
    +
    - Rating: - Progress: +
    diff --git a/packages/fiori/test/pages/IllustratedMessage.html b/packages/fiori/test/pages/IllustratedMessage.html index dfae84d4b9f7..c830f9be24bb 100644 --- a/packages/fiori/test/pages/IllustratedMessage.html +++ b/packages/fiori/test/pages/IllustratedMessage.html @@ -75,6 +75,8 @@ UnableToUpload UploadToCloud UploadCollection + TntAvatar + TntCalculator TntChartArea TntChartArea2 TntChartBar @@ -87,25 +89,33 @@ TntChartPie TntCodePlaceholder TntCompany + TntCompass TntComponents + TntDialog TntExternalLink TntFaceID TntFingerprint + TntHandshake + TntHelp TntLock TntMission + TntMissionFailed TntNoApplications TntNoFlows TntNoUsers TntRadar + TntRoadMap TntSecrets TntServices TntSessionExpired TntSessionExpiring + TntSettings TntSuccess TntSuccessfulAuth TntSystems TntTeams TntTools + TntTutorials TntUnableToLoad TntUnlock TntUnsuccessfulAuth @@ -131,7 +141,7 @@ - +
    Please try again or contact us at example@example.com
    Try again     @@ -154,6 +164,30 @@ >     +

    Vertical responsiveness

    + Container height: + + auto + 200px + 300px + 500px + 700px + + Container width: + + auto + 100% + 200px + 300px + 500px + 700px + +
    + + Action 1 + +
    + diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html index 2431b37c7d81..f302d93d58c4 100644 --- a/packages/fiori/test/pages/SideNavigation.html +++ b/packages/fiori/test/pages/SideNavigation.html @@ -37,10 +37,10 @@
    - - - - + + + + @@ -49,9 +49,9 @@ - - - + + + @@ -60,12 +60,10 @@ selection-change event
    -
    click event
    -
    prevent selection-change event diff --git a/packages/fiori/test/pages/SideNavigationOnly.html b/packages/fiori/test/pages/SideNavigationOnly.html index 23dc0752dd5c..334a34564a2d 100644 --- a/packages/fiori/test/pages/SideNavigationOnly.html +++ b/packages/fiori/test/pages/SideNavigationOnly.html @@ -10,14 +10,17 @@ - - - + + + - - - + + + diff --git a/packages/fiori/test/specs/IllustratedMessage.spec.js b/packages/fiori/test/specs/IllustratedMessage.spec.js index 518ea125ac1c..729e0575ec26 100644 --- a/packages/fiori/test/specs/IllustratedMessage.spec.js +++ b/packages/fiori/test/specs/IllustratedMessage.spec.js @@ -80,4 +80,122 @@ describe("Accessibility", () => { }); + it("title-level", async () => { + // Arrange + const illustratedMsg = await browser.$("#illustratedMsg2"), + illustratedMsgTitle = await browser.$("#illustratedMsg2").shadow$(".ui5-illustrated-message-root ui5-title"), + EXPECTED_TITLE_lEVEL = "H6", + NEW_TITLE_LEVEL = "H3", + DEFAULT_TITLE_LEVEL = "H2"; + + // Assert + assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), EXPECTED_TITLE_lEVEL, "level is set"); + + // Act + await illustratedMsg.setAttribute("title-level", NEW_TITLE_LEVEL); + + // Assert + assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), NEW_TITLE_LEVEL, "level is set"); + + // Act + await illustratedMsg.removeAttribute("title-level"); + + // Assert + assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), DEFAULT_TITLE_LEVEL, "level has the default value"); + + }); + +}); + +describe("Vertical responsiveness", () => { + before(async () => { + await browser.url(`test/pages/IllustratedMessage.html`); + }); + + it("content with auto size shrinks to fit the parent container", async () => { + + const newContainerHeight = 300, + expectedMedia = "dialog", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, `${newContainerHeight}px`); + + // Check + const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), + scrollHeight = await contents.getProperty("scrollHeight"), + offsetHeight = await contents.getProperty("offsetHeight"), + illustratedMsgMedia = await illustratedMsg.getProperty("media"); + assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); + assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); + assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); + }); + + it("content with auto size expands to fit the parent container", async () => { + + const newContainerHeight = 500, + expectedMedia = "scene", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, `${newContainerHeight}px`); + + // Check + const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), + scrollHeight = await contents.getProperty("scrollHeight"), + offsetHeight = await contents.getProperty("offsetHeight"), + illustratedMsgMedia = await illustratedMsg.getProperty("media"); + assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); + assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); + assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); + }); + + it("content with fixed size fits the parent container", async () => { + + const newContainerHeight = 200, + expectedMedia = "dialog", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // set fixed size + illustratedMsg.setProperty("size", "Dialog"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, `${newContainerHeight}px`); + + // Check + const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), + scrollHeight = await contents.getProperty("scrollHeight"), + offsetHeight = await contents.getProperty("offsetHeight"), + illustratedMsgMedia = await illustratedMsg.getProperty("media"); + assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); + assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); + assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); + }); + + it("shows image with unconstrained height when container has auto height", async () => { + + const newContainerHeight = "auto", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, newContainerHeight); + + // Check + const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); + const cssHeight = (await illustration.getCSSProperty("height")).value; + + assert.strictEqual(cssHeight, "160px", "svg has expected height"); + }); }); \ No newline at end of file diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js index c99bf665944e..5646c218867e 100644 --- a/packages/fiori/test/specs/ShellBar.spec.js +++ b/packages/fiori/test/specs/ShellBar.spec.js @@ -21,7 +21,7 @@ const getCustomActionProp = async (id, pos, prop) => { } describe("Component Behavior", () => { - before(async () => { + beforeEach(async () => { await browser.url(`test/pages/ShellBar.html`); }); @@ -38,8 +38,7 @@ describe("Component Behavior", () => { }); it("tests acc default roles", async () => { - let sb = await browser.$("#sbAcc"); - + const sb = await browser.$("#sbAcc"); const logoDOM = await sb.shadow$(".ui5-shellbar-logo"); // assert @@ -48,8 +47,7 @@ describe("Component Behavior", () => { }); it("tests acc custom roles", async () => { - let sb = await browser.$("#sbAccRoles"); - + const sb = await browser.$("#sbAccRoles"); const logoDOM = await sb.shadow$(".ui5-shellbar-logo"); // assertHANDLE_RESIZE_DEBOUNCE_RATE_WAIT @@ -69,7 +67,7 @@ describe("Component Behavior", () => { describe("ui5-shellbar menu", () => { it("tests close on content click", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); const firstMenuItem = await menuPopover.$("ui5-list > ui5-li"); @@ -80,7 +78,6 @@ describe("Component Behavior", () => { }); }); - describe("ui5-shellbar-item", async () => { it("tests the stable-dom-ref attribute", async () => { const shellbar = await browser.$("#shellbarwithitems"); @@ -321,13 +318,13 @@ describe("Component Behavior", () => { describe("Events", () => { describe("Big screen", () => { - before(async () => { + beforeEach(async () => { await browser.setWindowSize(1920, 1080); }); it("tests opening of menu", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); await primaryTitle.click(); @@ -339,8 +336,6 @@ describe("Component Behavior", () => { const input = await browser.$("#press-input"); await notificationsIcon.click(); - - assert.strictEqual(await input.getValue(), "Notifications", "Input value is set by click event of Notifications icon"); }); @@ -378,7 +373,7 @@ describe("Component Behavior", () => { it("tests menuItemClick event", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); const firstMenuItem = await menuPopover.$("ui5-list > ui5-li"); const secondMenuItem = await menuPopover.$("ui5-list > ui5-li:nth-child(2)"); @@ -391,6 +386,9 @@ describe("Component Behavior", () => { assert.strictEqual(await input.getValue(), "Application 1", "Input value is set by click event of the first menu item"); assert.strictEqual(await inputData.getValue(), "key1", "The user defined attributes are available."); + await input.setProperty("value", ""); + await inputData.setProperty("value", ""); + await primaryTitle.click(); await secondMenuItem.click(); @@ -424,7 +422,7 @@ describe("Component Behavior", () => { }); describe("Small screen", () => { - before(async () => { + beforeEach(async () => { await browser.setWindowSize(510, 1080); }); @@ -439,7 +437,7 @@ describe("Component Behavior", () => { it("tests opening of menu", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); await primaryTitle.click(); @@ -448,7 +446,7 @@ describe("Component Behavior", () => { it("tests notificationsClick event", async () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const notificationListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(4)"); const input = await browser.$("#press-input"); @@ -470,7 +468,7 @@ describe("Component Behavior", () => { it("tests productSwitchClick event", async () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(5)"); const input = await browser.$("#press-input"); @@ -483,7 +481,7 @@ describe("Component Behavior", () => { it("tests preventDefault of productSwitchClick event", async () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(5)"); @@ -497,7 +495,7 @@ describe("Component Behavior", () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); const searchField = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-full-width-wrapper"); const cancelButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const searchListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(1)"); diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js index e634e44dca6e..e36a344357c0 100644 --- a/packages/fiori/test/specs/SideNavigation.spec.js +++ b/packages/fiori/test/specs/SideNavigation.spec.js @@ -2,22 +2,16 @@ import { assert } from "chai"; async function getTreeItemsInPopover() { const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1"); - const items = await browser.$$(`>>>.${staticAreaItemClassName} ui5-responsive-popover ui5-side-navigation ui5-tree-item`); + const items = await browser.$$(`>>>.${staticAreaItemClassName} ui5-responsive-popover .ui5-sn-item`); return items; } -async function getItems(selector) { - const listItems = await browser.$$(`>>>${selector}`); - - const promises = listItems.map(async (item) => { - const isDisplayed = await item.isDisplayedInViewport(); - return isDisplayed ? item : null; - },); - - const items = await Promise.all(promises); +async function getRootItemInPopover() { + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1"); + const rootItem = await browser.$(`>>>.${staticAreaItemClassName} ui5-responsive-popover .ui5-sn-root`); - return items.filter((item) => item); + return rootItem; } describe("Component Behavior", () => { @@ -28,9 +22,9 @@ describe("Component Behavior", () => { describe("Main functionality", async () => { it("Tests selection-change event", async () => { const input = await browser.$("#counter"); - const sideNavigation = await browser.$("ui5-side-navigation"); - let items = await browser.$$(">>>.ui5-sn-items-tree [ui5-tree-item]"); - const fixedItems = await browser.$$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item]"); + const sideNavigation = await browser.$("#sn1"); + let items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); + const fixedItems = await sideNavigation.shadow$$(".ui5-sn-fixed .ui5-sn-item"); await items[0].click(); await items[3].click(); @@ -42,7 +36,7 @@ describe("Component Behavior", () => { assert.strictEqual(await input.getProperty("value"), "3", "Event is fired"); await sideNavigation.setAttribute("collapsed", "true"); - items = await browser.$$(">>>.ui5-sn-items-tree [ui5-tree-item]"); + items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); await items[0].click(); @@ -57,47 +51,38 @@ describe("Component Behavior", () => { await items[1].click(); assert.strictEqual(await input.getProperty("value"), "5", "Event is fired"); + + await sideNavigation.removeAttribute("collapsed"); }); it("Tests click event & whole-item-toggleable property", async () => { const input = await browser.$("#click-counter"); - let items = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const sideNavigation = await browser.$("ui5-side-navigation"); + let items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item-level1"); await items[0].click(); - assert.strictEqual(await input.getProperty("value"), "7", "Event is fired"); - - await items[3].click(); - - assert.strictEqual(await input.getProperty("value"), "7", "Event is not fired"); - assert.ok(await items[3].getProperty("expanded"), "Expanded is toggled"); + assert.strictEqual(await input.getProperty("value"), "6", "Event is fired"); await items[3].click(); - assert.strictEqual(await input.getProperty("value"), "7", "Event is not fired"); - assert.notOk(await items[3].getProperty("expanded"), "Expanded is toggled"); - - await items[1].click(); - assert.strictEqual(await input.getProperty("value"), "8", "Event is fired"); - - items = await getTreeItemsInPopover(); + assert.strictEqual(await input.getProperty("value"), "6", "Event is not fired"); + assert.strictEqual(await items[3].getAttribute("aria-expanded"), "true" ,"Expanded is toggled"); await items[1].click(); - - assert.strictEqual(await input.getProperty("value"), "9", "Event is fired"); - + assert.strictEqual(await input.getProperty("value"), "7", "Event is fired"); }); it("Tests header visibility", async () => { - let showHeader = null; + const sideNavigation = await browser.$("ui5-side-navigation"); await browser.$("#sn1").setProperty("collapsed", false); - showHeader = await browser.$("#sn1").getProperty("showHeader"); + let showHeader = await sideNavigation.getProperty("showHeader"); assert.ok(showHeader, "Header is displayed"); await browser.$("#sn1").setProperty("collapsed", true); - showHeader = await browser.$("#sn1").getProperty("showHeader"); + showHeader = await sideNavigation.getProperty("showHeader"); assert.notOk(showHeader, "Header is not displayed"); @@ -107,75 +92,56 @@ describe("Component Behavior", () => { it("Tests tooltips when expanded", async () => { const sideNavigation = await browser.$("#sn1"); - const items = await sideNavigation.$$("ui5-side-navigation-item"); - const renderedItems = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); - const secondItemSubItems = await items[1].$$("ui5-side-navigation-sub-item"); + const renderedItems = await sideNavigation.shadow$$(".ui5-sn-item"); - assert.strictEqual(await renderedItems[0].getAttribute("title"), await items[0].getAttribute("title"), "Title is set as tooltip to root item"); - assert.strictEqual(await renderedItems[1].getAttribute("title"), await items[1].getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); + // items + assert.strictEqual(await renderedItems[0].getAttribute("title"), await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item"); + assert.strictEqual(await renderedItems[1].getAttribute("title"), await browser.$("#item2").getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); // sub items - assert.strictEqual(await renderedItems[2].getAttribute("title"), await secondItemSubItems[0].getAttribute("title"), "Title is set as tooltip to sub item"); - assert.strictEqual(await renderedItems[3].getAttribute("title"), await secondItemSubItems[1].getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); - - // fixed items - const fixedItems = await sideNavigation.$$("ui5-side-navigation-item[slot=fixedItems]"); - let renderedFixedItems = await getItems("#ui5-sn-fixed-items-tree [ui5-tree-item]"); - await renderedFixedItems[0].shadow$("ui5-icon.ui5-li-tree-toggle-icon").click(); // expand the item - renderedFixedItems = await getItems("#ui5-sn-fixed-items-tree [ui5-tree-item]"); - const firstFixedItemSubItems = await fixedItems[0].$$("ui5-side-navigation-sub-item"); - - assert.strictEqual(await renderedFixedItems[0].getAttribute("title"), await fixedItems[0].getAttribute("title"), "Title is set as tooltip to root fixed item"); - assert.strictEqual(await renderedFixedItems[2].getAttribute("title"), await firstFixedItemSubItems[1].getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); - - // clean up - await renderedFixedItems[0].shadow$("ui5-icon.ui5-li-tree-toggle-icon").click(); // collapse the item + assert.strictEqual(await renderedItems[2].getAttribute("title"), await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item"); + assert.strictEqual(await renderedItems[3].getAttribute("title"), await browser.$("#item22").getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); }); it("Tests tooltips when collapsed", async () => { await browser.$("#sn1").setProperty("collapsed", true); + const sideNavigation = await browser.$("#sn1"); - const items = await sideNavigation.$$("ui5-side-navigation-item"); - const secondItemSubItems = await items[1].$$("ui5-side-navigation-sub-item"); - const renderedItems = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const renderedItems = await sideNavigation.shadow$$(".ui5-sn-item"); - assert.strictEqual(await renderedItems[0].getAttribute("title"), await items[0].getAttribute("title"), "Title is set as tooltip to root item"); - assert.strictEqual(await renderedItems[1].getAttribute("title"), await items[1].getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); + assert.strictEqual(await renderedItems[0].getAttribute("title"), await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item"); + assert.strictEqual(await renderedItems[1].getAttribute("title"), await browser.$("#item2").getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); await renderedItems[1].click(); const popoverItems = await getTreeItemsInPopover(); - assert.strictEqual(await popoverItems[0].getAttribute("title"), await items[1].getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); - assert.strictEqual(await popoverItems[1].getAttribute("title"), await secondItemSubItems[0].getAttribute("title"), "Title is set as tooltip to sub item"); + assert.strictEqual(await popoverItems[0].getAttribute("title"), await browser.$("#item2").getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); + assert.strictEqual(await popoverItems[1].getAttribute("title"), await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item"); // clean up await browser.$("#sn1").setProperty("collapsed", false); - await browser.executeAsync(async (done) => { - // close popover after the test because next call of getItems will return the items from the popover as well - const staticArea = await document.querySelector("ui5-side-navigation").getStaticAreaItemDomRef(); - const popover = staticArea.querySelector(".ui5-side-navigation-popover"); - popover.addEventListener("ui5-after-close", () => { - done(); - }); - - popover.close(); - }); }); - + it("tests the prevention of the ui5-selection-change event", async () => { - const items = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const sideNavigation = await browser.$("#sn1"); + const items = await sideNavigation.shadow$$(".ui5-sn-item"); await items[3].click(); + assert.ok(await browser.$("#item22").getProperty("selected"), "new item is selected"); + assert.strictEqual(await items[3].getAttribute("aria-current"), "page", "aria-current is set"); + const selectionChangeCheckbox = await browser.$("#prevent-selection"); await selectionChangeCheckbox.click(); await items[0].click(); - assert.strictEqual(await items[0].getAttribute("selected"), null, "new item was not selected"); + assert.notOk(await browser.$("#item1").getProperty("selected"), "new item is not selected"); + assert.notExists(await items[0].getAttribute("aria-current"), "aria-current is not changed"); - assert.strictEqual(await items[3].getAttribute("selected"), "true", "initially selected item has not changed"); + assert.ok(await browser.$("#item22").getProperty("selected"), "initially selected item has not changed"); + assert.strictEqual(await items[3].getAttribute("aria-current"), "page", "aria-current is not changed"); await selectionChangeCheckbox.click(); }); @@ -185,7 +151,7 @@ describe("Component Behavior", () => { await sideNavigation.setAttribute("collapsed", "true"); const input = await browser.$("#counter"); - const items = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const items = await sideNavigation.shadow$$(".ui5-sn-item"); await items[0].click(); @@ -200,35 +166,33 @@ describe("Component Behavior", () => { await sideNavigation.removeAttribute("collapsed"); }); - it("Tests ACC roles and more when expanded", async () => { + it("Tests ACC when expanded", async () => { const sideNavigation = await browser.$("#sn1"); const sideNavigationRoot = await sideNavigation.shadow$(".ui5-sn-root"); - const sideNavigationTree = await sideNavigation.shadow$("ui5-tree").shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationTreeItem = await browser.$(">>>.ui5-sn-items-tree [ui5-tree-item] li") - const sideNavigationFixedItemsTree = await sideNavigation.shadow$$("ui5-tree")[1]; - const sideNavigationFixedItemsTreeElement = sideNavigationFixedItemsTree.shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationFixedItemsTreeItem = await browser.$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item] li") - assert.strictEqual(await sideNavigationRoot.getAttribute("role"), "navigation", "Role of the SideNavigation root element is correctly set"); + const sideNavigationTree = await sideNavigation.shadow$(".ui5-sn-flexible"); + const sideNavigationFixedTree = await sideNavigation.shadow$(".ui5-sn-fixed"); + + const items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); + const fixedItems = await sideNavigation.shadow$$(".ui5-sn-fixed .ui5-sn-item"); + + assert.strictEqual(await sideNavigationRoot.getTagName(), "nav", "tag name of the SideNavigation root element is correctly set"); let roleDescription = await browser.executeAsync(done => { const sn = document.getElementById("sn1"); done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC)); }); + assert.strictEqual(await sideNavigationTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation tree element is correctly set"); + assert.notExists(await items[0].getAttribute("aria-roledescription"),"Role description of the SideNavigation tree item is not set"); - // items - let roleDescriptionItem = await browser.executeAsync(done => { - const sn = document.getElementById("sn1"); - done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC)); - }); - assert.strictEqual(await sideNavigationTreeItem.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation tree item is correctly set"); - assert.notExists(await sideNavigationTreeItem.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await sideNavigationTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation tree is correctly set"); + assert.notExists(await items[1].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); // fixed items - assert.strictEqual(await sideNavigationFixedItemsTreeElement.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); - assert.strictEqual(await sideNavigationFixedItemsTreeItem.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation fixed tree item is correctly set"); - assert.notExists(await sideNavigationFixedItemsTreeItem.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await sideNavigationFixedTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); + assert.notExists(await fixedItems[0].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set"); + assert.notExists(await fixedItems[0].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); }); it("Tests ACC roles and more when collapsed", async () => { @@ -236,19 +200,18 @@ describe("Component Behavior", () => { await browser.url(`test/pages/SideNavigation.html`); // act - await browser.$("#sn1").setProperty("collapsed", true); - const sideNavigation = await browser.$("#sn1"); + await sideNavigation.setProperty("collapsed", true); + const sideNavigationRoot = await sideNavigation.shadow$(".ui5-sn-root"); - const sideNavigationTree = await sideNavigation.shadow$("ui5-tree").shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationTreeItem1 = await browser.$(">>>.ui5-sn-items-tree [ui5-tree-item] li") // with no sub-items - const sideNavigationTreeItem2 = await browser.$$(">>>.ui5-sn-items-tree [ui5-tree-item] li")[1] // with sub-items - const sideNavigationFixedItemsTree = await sideNavigation.shadow$$("ui5-tree")[1]; - const sideNavigationFixedItemsTreeElement = sideNavigationFixedItemsTree.shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationFixedItemsTreeItem1 = await browser.$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item] li") // with sub-items - const sideNavigationFixedItemsTreeItem2 = await browser.$$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item] li")[1]; // with no sub-items - assert.strictEqual(await sideNavigationRoot.getAttribute("role"), "navigation", "Role of the SideNavigation root element is correctly set"); + const sideNavigationTree = await sideNavigation.shadow$(".ui5-sn-flexible"); + const sideNavigationFixedTree = await sideNavigation.shadow$(".ui5-sn-fixed"); + + const items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); + const fixedItems = await sideNavigation.shadow$$(".ui5-sn-fixed .ui5-sn-item"); + + assert.strictEqual(await sideNavigationRoot.getTagName(), "nav", "tag name of the SideNavigation root element is correctly set"); let roleDescription = await browser.executeAsync(done => { const sn = document.getElementById("sn1"); @@ -256,37 +219,25 @@ describe("Component Behavior", () => { }); assert.strictEqual(await sideNavigationTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation tree element is correctly set"); - // items - let roleDescriptionItem = await browser.executeAsync(done => { - const sn = document.getElementById("sn1"); - done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC)); - }); - assert.strictEqual(await sideNavigationTreeItem1.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation tree item is correctly set"); - assert.notExists(await sideNavigationTreeItem1.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); - assert.strictEqual(await sideNavigationTreeItem2.getAttribute("aria-haspopup"), "Tree", "There is 'aria-haspopup' with correct value"); + assert.notExists(await items[0].getAttribute("aria-roledescription"), "Role description of the SideNavigation tree item is not set"); + assert.notExists(await items[0].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await items[1].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value"); // fixed items - assert.strictEqual(await sideNavigationFixedItemsTreeElement.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); - assert.strictEqual(await sideNavigationFixedItemsTreeItem1.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation fixed tree item is correctly set"); - assert.strictEqual(await sideNavigationFixedItemsTreeItem1.getAttribute("aria-haspopup"), "Tree", "There is 'aria-haspopup' with correct value"); - assert.notExists(await sideNavigationFixedItemsTreeItem2.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await sideNavigationFixedTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); + assert.notExists(await fixedItems[0].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set"); + assert.strictEqual(await fixedItems[0].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value"); + assert.notExists(await fixedItems[1].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); // popup - await sideNavigationTreeItem2.click(); - - const popoverItems = await getTreeItemsInPopover(); + await items[1].click(); - // items - roleDescriptionItem = await browser.executeAsync(done => { - const sn = document.getElementById("sn1"); - done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC)); - }); + const popoverRootItem = await getRootItemInPopover(); - assert.strictEqual(await popoverItems[0].shadow$("li").getAttribute("aria-roledescription"), roleDescriptionItem, "Role description is correctly set"); - assert.strictEqual(await popoverItems[1].shadow$("li").getAttribute("aria-roledescription"), roleDescriptionItem, "Role description is correctly set"); + assert.strictEqual(await popoverRootItem.getAttribute("role"), "none", "Role is correctly set"); // clean up - await browser.$("#sn1").setProperty("collapsed", false); + await sideNavigation.setProperty("collapsed", false); }); }); }); diff --git a/packages/fiori/test/specs/UploadCollection.spec.js b/packages/fiori/test/specs/UploadCollection.spec.js index acad191ff271..63a3c155e428 100644 --- a/packages/fiori/test/specs/UploadCollection.spec.js +++ b/packages/fiori/test/specs/UploadCollection.spec.js @@ -22,7 +22,7 @@ describe("UploadCollection", () => { await editButton.click(); assert.ok(await secondItem.shadow$(".ui5-uci-edit-container").isDisplayed(), "edit container should be rendered"); - assert.ok(await secondItem.shadow$(".ui5-uci-edit-buttons").isDisplayed(), "edit buttons should be rendered"); + assert.ok(await secondItem.shadow$(".ui5-uci-buttons").isDisplayed(), "buttons should be rendered"); assert.notOk(await secondItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden"); // reset the item diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 3acc54d192cb..c5980781b2fc 100644 --- a/packages/icons-business-suite/CHANGELOG.md +++ b/packages/icons-business-suite/CHANGELOG.md @@ -3,6 +3,94 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite diff --git a/packages/icons-business-suite/README.md b/packages/icons-business-suite/README.md index b37adba90ffa..23fa262ed64d 100644 --- a/packages/icons-business-suite/README.md +++ b/packages/icons-business-suite/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - SAP Business Suite Icons [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json index 77da12b52995..1d7b63a91c98 100644 --- a/packages/icons-business-suite/package.json +++ b/packages/icons-business-suite/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-business-suite", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index 6f473f6fad52..8efcad50d5f1 100644 --- a/packages/icons-tnt/CHANGELOG.md +++ b/packages/icons-tnt/CHANGELOG.md @@ -3,6 +3,94 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/webcomponents-icons-tnt diff --git a/packages/icons-tnt/README.md b/packages/icons-tnt/README.md index 9908ca5213d3..6c291432fdc7 100644 --- a/packages/icons-tnt/README.md +++ b/packages/icons-tnt/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - SAP Fiori Tools (TNT) Icons [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json index dd23bc662955..a371dc833be9 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 0990fc89a7bb..42c86f9bc5d4 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -3,6 +3,97 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + + +### Features + +* update @ui5/webcomponents-icons to 5.07 & 4.19 ([#7708](https://github.com/SAP/ui5-webcomponents/issues/7708)) ([1732304](https://github.com/SAP/ui5-webcomponents/commit/173230467f93b227c37b54b666dcfcfec07bcab1)) + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/README.md b/packages/icons/README.md index 3ae68182f75a..2043aa43db12 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Icons [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/icons/package.json b/packages/icons/package.json index 733dded36ba3..ee8931a96c64 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1" } } diff --git a/packages/icons/src/v4/SAP-icons.json b/packages/icons/src/v4/SAP-icons.json index 935f70756e90..47cb1da0522b 100644 --- a/packages/icons/src/v4/SAP-icons.json +++ b/packages/icons/src/v4/SAP-icons.json @@ -1347,7 +1347,7 @@ "path": "M32 129q-13 0-22.5-9.5T0 97q0-14 9.5-23T32 65h448q14 0 23 9t9 23q0 13-9 22.5t-23 9.5H32zm0 159q-13 0-22.5-9.5T0 256q0-14 9.5-23t22.5-9h448q14 0 23 9t9 23q0 13-9 22.5t-23 9.5H32zm0 159q-13 0-22.5-9.5T0 415q0-14 9.5-23t22.5-9h448q14 0 23 9t9 23q0 13-9 22.5t-23 9.5H32z" }, "message-error": { - "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-3 2-3 4t2 5l89 89q4 4 4 8t-4 9l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-4-5-4-9t4-8l88-89q3-3 3-5t-3-4l-88-89q-4-4-4-8 0-5 4-9l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q5 4 5 8t-5 9z", + "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-5 3-1 9l89 89q8 8 0 17l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-8-9 0-17l88-89q5-5 0-9l-88-89q-8-8 0-17l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q9 8 0 17z", "acc": { "key": "ICON_MESSAGE_ERROR", "defaultText": "Error" @@ -1485,7 +1485,7 @@ "path": "M0 96q0-26 19-45t45-19h384q27 0 45.5 19T512 96v224q0 26-18.5 45T448 384h-32v75q0 10-6.5 15.5T395 480t-12-4l-79-92H64q-26 0-45-19T0 320V96zm64 256h256l64 80v-80h64q14 0 23-9t9-23V96q0-13-9-22.5T448 64H64q-13 0-22.5 9.5T32 96v224q0 14 9.5 23t22.5 9zm64-112q0-7 5-11.5t11-4.5h224q16 0 16 16 0 6-4.5 11t-11.5 5H144q-6 0-11-5t-5-11zm16-112h224q16 0 16 16 0 6-4.5 11t-11.5 5H144q-6 0-11-5t-5-11q0-7 5-11.5t11-4.5z" }, "notification": { - "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-3 2-3 4t2 5l89 89q4 4 4 8t-4 9l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-4-5-4-9t4-8l88-89q3-3 3-5t-3-4l-88-89q-4-4-4-8 0-5 4-9l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q5 4 5 8t-5 9z" + "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-5 3-1 9l89 89q8 8 0 17l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-8-9 0-17l88-89q5-5 0-9l-88-89q-8-8 0-17l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q9 8 0 17z" }, "number-sign": { "path": "M495.24 159.827q8.99 0 13.985 7.99t1 15.984l-15.983 31.965q-4.995 7.991-14.984 7.991H374.372l-12.986 63.93h101.89q8.99 0 13.984 7.992t.999 15.983l-15.983 31.965q-4.994 7.991-13.985 7.991h-100.89l-24.973 115.875q-1.998 11.987-14.984 11.987H275.48q-7.991 0-12.487-5.494t-2.497-13.486l22.975-108.882h-95.896l-24.973 115.875q-1.997 11.987-14.983 11.987h-31.966q-7.991 0-12.486-5.494t-2.497-13.486l22.975-108.882H16.76q-8.99 0-13.985-7.491t-1-15.484l15.984-31.965q4.994-8.99 14.983-8.99h104.886l12.986-63.93H48.724q-8.99 0-13.984-7.493t-.999-15.483l15.983-31.965q4.994-8.99 14.984-8.99h99.891L189.572 44.95q1.998-12.986 14.984-12.986h31.965q7.991 0 12.487 5.994t2.497 13.985L228.53 159.827h95.896L349.399 44.95q1.997-12.986 14.983-12.986h31.966q7.991 0 12.486 5.994t2.497 13.985l-22.975 107.883H495.24zm-184.8 63.93h-95.895l-12.986 63.93h95.896z" @@ -1582,10 +1582,10 @@ "ltr": true }, "pdf-attachment": { - "path": "M.5 480V128l128-128h224q13 0 22.5 9t9.5 23v64h-32V32h-192v96q0 14-9.5 23t-23.5 9h-95v320h320v-48h32v48q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23zm244-144l31-12q28-45 42-89-7-7-9-22t-2-25q0-22 7-37.5t21-15.5q11 0 18 12 4 8 5 18t1 18q0 18-6 44v6q5 8 13.5 22t18.5 25q5 5 9 8.5t8 5.5l31-7q5-1 9-1.5t8-.5q22 0 42 11t20 26q0 23-34 23-18 0-41.5-5.5T396.5 325l-12 3q-8 2-16 3.5t-16 3.5q-17 4-31 7.5t-25 6.5q-33 51-54 51l-7-1q-21-8-21-26t30-37zm74-24l45-10q-13-14-24-30z" + "path": "M496 223q16 0 16 16t-16 16h-85v44h60q16 0 16 16t-16 16h-60v60q0 16-16 16-6 0-11-4.5t-5-11.5V239q0-7 5-11.5t11-4.5h101zm-363 67q0 27-19 46.5T67 356H32v35q0 16-16 16-6 0-11-4.5T0 391V239q0-7 5-11.5t11-4.5h51q28 0 47 19.5t19 47.5zM32 324h35q14 0 24-10t10-24-10-24.5T67 255H32v69zm221-101q28 0 47 19.5t19 47.5v50q0 28-19 47.5T253 407h-51q-6 0-11-4.5t-5-11.5V239q0-7 5-11.5t11-4.5h51zm34 67q0-14-10-24.5T253 255h-35v120h35q14 0 24-10.5t10-24.5v-50zm132 153h32v36q0 14-9 23t-23 9H99q-14 0-23-9t-9-23v-33h32v33h320v-36zM99 192H67v-64L195 0h224q13 0 22 9 10 10 10 23v64h-32V32H227v96q0 13-10 22-9 9-23 9H99v33z" }, "pdf-reader": { - "path": "M96 160l96-96h192q13 0 22.5 9t9.5 23v32h-32V96H224v64q0 14-9.5 23t-23.5 9h-63v224h256v-32h32v32q0 14-9 23t-23 9H128q-14 0-23-9t-9-23V160zm146 166l27-10q13-22 22.5-41.5T307 236q-6-6-8-19.5t-2-22.5q0-20 6-33.5t19-13.5q8 0 12 4.5t6 11.5 2.5 14.5.5 12.5q0 8-1 18t-4 21v5l12.5 20 16.5 22 8 8 7 5h2l32-8q7 0 18 1.5t21 5 17.5 10T480 314q0 20-30 20-21 0-34-4-19-3-39-13l-10 2q-8 2-14.5 3t-14.5 3q-15 4-27.5 7t-22.5 6q-28 45-48 45h-6q-19-7-19-24 0-15 27-33zM96 0h32v32H96q-27 0-45.5 19T32 96v32H0V96q0-40 28-68T96 0zM0 384h32v32q0 26 18.5 45T96 480h32v32H96q-40 0-68-28T0 416v-32zm416 96q26 0 45-19t19-45v-32h32v32q0 20-7.5 37.5t-21 30.5-30.5 20.5-37 7.5h-32v-32h32zM384 32V0h32q20 0 37 7.5T483.5 28t21 30.5T512 96v32h-32V96q0-26-19-45t-45-19h-32zm-36 264q-12-12-21-27l-19 36z", + "path": "M96 0Q56 0 28 28T0 96h32q0-26 18.5-45T96 32h32V0H96zM0 416q0 40 28 68t68 28h32v-32H96q-27 0-45.5-19T32 416H0zm384 64v32h32q20 0 37-7.5t30.5-20.5 21-30.5T512 416h-32q0 26-19 45t-45 19h-32zm32-448q26 0 45 19t19 45h32q0-20-7.5-37.5t-21-30.5T453 7.5 416 0h-32v32h32zm80 128q16 0 16 16t-16 16h-85v44h60q16 0 16 16t-16 16h-60v60q0 6-4.5 11t-11.5 5-11.5-5-4.5-11V176q0-16 16-16h101zm-363 67q0 27-19.5 46.5T67 293H32v35q0 6-4.5 11T16 344t-11.5-5T0 328V176q0-16 16-16h51q27 0 46.5 19.5T133 227zM32 261h35q14 0 24-10t10-24-10-24.5T67 192H32v69zm221-101q27 0 46.5 19.5T319 227v50q0 28-19.5 47.5T253 344h-51q-7 0-11.5-5t-4.5-11V176q0-16 16-16h51zm34 67q0-14-10-24.5T253 192h-35v120h35q14 0 24-10.5t10-24.5v-50z", "ltr": true }, "pending": { @@ -2458,6 +2458,15 @@ }, "time-off": { "path": "M448 480V128H64v352h384zM128 64v32h32V64h-32zm224 0v32h32V64h-32zm96-32q14 0 23 9t9 23v416q0 14-9 23t-23 9H64q-14 0-23-9t-9-23V64q0-14 9-23t23-9h64V0h32v32h192V0h32v32h64zM211 388l-15-15 30-31-30-30 15-15 31 30 30-30 16 15-31 30 31 31-16 15-30-30zm128 0l-15-15 30-31-30-30 15-15 31 30 30-30 16 15-31 30 31 31-16 15-30-30zm-211-4q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9zm0-128q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9zm128 0q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9zm128 0q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9z" + }, + "ai": { + "path": "M334.347 359.298q-27.945 8.983-49.404 20.96t-37.426 27.446-27.447 36.928-21.458 50.401q-2.994 7.985-9.481 12.476T175.657 512t-13.474-4.491-9.481-12.476q-9.98-28.943-21.458-50.401t-27.447-36.928-36.928-27.447-49.902-20.959q-8.983-2.994-12.975-9.481T0 335.844t3.992-13.973 12.975-9.481q28.943-9.98 49.902-21.458t36.928-27.447 27.447-37.427 21.458-49.403q2.994-7.984 9.481-12.476t13.474-4.49 13.474 4.49 9.481 12.476q9.98 27.945 21.458 49.403t27.447 37.427 37.426 27.447 49.404 21.458q7.984 2.994 12.476 9.481t4.49 13.973-4.49 13.973-12.476 9.481zm167.672-250.51q-31.937 10.978-47.407 26.448t-26.448 47.407q-2.994 8.983-12.975 8.983t-12.975-8.983q-10.978-31.937-26.448-47.407t-47.407-26.448q-8.983-2.995-8.983-12.476t8.983-13.474q31.937-10.978 47.407-26.448t26.448-47.408Q405.21 0 415.19 0t12.975 8.982q10.978 31.938 26.448 47.408t47.407 26.448q8.983 3.992 8.983 13.474t-8.983 12.476z" + }, + "da-2": { + "path": "M376 187q8-3 8-11t-8-10q-26-9-39.5-22.5T315 104q-3-8-11-8t-11 8q-8 26-21.5 39.5T232 166q-8 2-8 10t8 11q26 9 39.5 22.5T293 249q3 7 11 7t11-7q8-26 21.5-39.5T376 187zm132-35q4 7 4 15 0 7-5 15L277 502q-8 10-21 10t-21-10L5 182q-5-8-5-15 0-8 5-16L114 10q8-10 20-10h256q14 0 22 11z" + }, + "da": { + "path": "M36 163l220 305 221-306-89-130H137zm220 349q-8 0-13-7L3 172q-3-5-3-10t3-9L117 6q5-6 12-6h267q9 0 13 7l100 146q3 4 3 9t-3 10L269 505q-5 7-13 7zm120-326q-26 9-39.5 22.5T315 248q-3 8-11 8t-11-8q-8-26-21.5-39.5T232 186q-8-2-8-10t8-11q26-9 39.5-22.5T293 103q3-7 11-7t11 7q8 26 21.5 39.5T376 165q8 3 8 11 0 3-1.5 6t-6.5 4z" } } } \ No newline at end of file diff --git a/packages/icons/src/v5/SAP-icons.json b/packages/icons/src/v5/SAP-icons.json index 315eb3410f8e..1d78a001ac2f 100644 --- a/packages/icons/src/v5/SAP-icons.json +++ b/packages/icons/src/v5/SAP-icons.json @@ -8,7 +8,7 @@ "path": "M422 32q38 0 64 26t26 64v268q0 38-26 64t-64 26H90q-38 0-64-26T0 390V122q0-38 26-64t64-26h332zm39 90q0-17-11-28t-28-11H211v141h250V122zM51 390q0 17 11 28t28 11h70V83H90q-17 0-28 11t-11 28v268zm160 39h77V275h-77v154zm128-109h122v-45H339v45zm83 109q17 0 28-11t11-28v-19H339v58h83z" }, "Netweaver-business-client": { - "path": "M414 30q1 0 1.5.5t1.5.5q6 1 6 9l-10 48q-1 6-3 11t-7 9l-78 45q-6 2-9 2-8 0-10.5-7t-2.5-9q0-7 16-25t36-36.5 38-33T414 30zm78 66q5-3 8-3 6 0 9 5t3 12q0 14-9.5 34.5T479 186t-29.5 39-27.5 29q-5 5-18.5 16t-29 22.5-29.5 20-21 8.5q-8 0-8-7l-7-109q-2-5 3-10.5t10-8.5zm-272-3q13 1 22 8.5t14.5 17 8 19.5 2.5 16l21 311q0 15-11 15-7 0-13-8l-90-131q-10-14-14-28.5t-4-28.5q0-17 4-34t9-31q3-10 5.5-18t2.5-14q0-14-11.5-22T149 155q-6-2-21.5-5.5t-34-7.5-37-7.5T26 129l-16-3q-10-2-10-15v-2q1-11 15-11l133 12q8 0 14-2l12-4 6-2q2-1 4-1.5t4-1.5l8-4 9-2h15z" + "path": "M414 30q1 0 1.5.5t1.5.5q6 1 6 9l-10 48q-1 6-3 11t-7 9l-78 45q-6 2-9 2-8 0-10.5-7t-2.5-9q0-7 16-25t36-36.5 38-33T414 30zM220 93q13 1 22 8.5t15 17 8.5 19T268 153l20 312q0 15-11 15-7 0-13-8l-90-131q-10-14-14-28.5t-4-28.5q0-17 4-34t9-31q3-10 5.5-18t2.5-14q0-14-11.5-22T149 155q-6-2-21.5-5.5t-34-7.5-37-7.5T26 129l-16-3q-10-2-10-15v-2q1-11 15-11l133 12q8 0 14-2l12-4 6-2q2-1 4-1.5t4-1.5l8-4 9-2h15zm272 3q5-3 8-3 6 0 9 5t3 12q0 14-9.5 34.5T479 186t-29.5 39-26.5 29q-6 5-19.5 16t-29 22.5-29.5 20-21 8.5q-8 0-8-7l-7-109q-2-5 3-10.5t10-8.5z" }, "accelerated": { "path": "M390 64q38 0 64 26t26 64v268q0 38-26 64t-64 26H122q-38 0-64-26t-26-64V154q0-38 26-64t64-26h6V26q0-11 7.5-18.5T154 0t18 7.5 7 18.5v38h154V26q0-11 7-18.5T358 0t18.5 7.5T384 26v38h6zm39 90q0-17-11-28t-28-11h-6v19q0 11-7.5 18.5T358 160t-18-7.5-7-18.5v-19H179v19q0 11-7 18.5t-18 7.5-18.5-7.5T128 134v-19h-6q-17 0-28 11t-11 28v268q0 17 11 28t28 11h268q17 0 28-11t11-28V154zm-71 83q11 0 18.5 7t7.5 18-7.5 18.5T358 288H218q-11 0-18.5-7.5T192 262t7.5-18 18.5-7h140zm-96 83q11 0 18.5 7.5T288 346t-7.5 18-18.5 7H154q-11 0-18.5-7t-7.5-18 7.5-18.5T154 320h108z" @@ -593,7 +593,7 @@ "path": "M368 160q-33 0-56.5-23.5T288 80t23.5-56.5T368 0q29 0 51 18t27 46h40q11 0 18.5 7.5T512 90t-7.5 18-18.5 7h-46q-10 20-29 32.5T368 160zm0-109q-12 0-20.5 8.5T339 80t8.5 20.5T368 109t20.5-8.5T397 80t-8.5-20.5T368 51zM26 115q-11 0-18.5-7T0 90t7.5-18.5T26 64h172q11 0 18.5 7.5T224 90t-7.5 18-18.5 7H26zm118 77q33 0 56.5 23.5T224 272t-23.5 56.5T144 352t-56.5-23.5T64 272t23.5-56.5T144 192zm342 45q11 0 18.5 7t7.5 18-7.5 18.5T486 288H314q-11 0-18.5-7.5T288 262t7.5-18 18.5-7h172zm-342 64q12 0 20.5-8.5T173 272t-8.5-20.5T144 243t-20.5 8.5T115 272t8.5 20.5T144 301zm342 96q11 0 18.5 7t7.5 18-7.5 18.5T486 448H382q-5 28-27 46t-51 18q-33 0-56.5-23.5T224 432t23.5-56.5T304 352q24 0 43 12.5t29 32.5h110zm-352 0q11 0 18.5 7t7.5 18-7.5 18.5T134 448H26q-11 0-18.5-7.5T0 422t7.5-18 18.5-7h108zm170 64q12 0 20.5-8.5T333 432t-8.5-20.5T304 403t-20.5 8.5T275 432t8.5 20.5T304 461z" }, "database": { - "path": "M479 85q1 2 1 7v318q0 32-26.5 52t-63 31-75 15-61.5 4q-14 0-36.5-1.5t-47-5.5-49-11.5T77 475t-32.5-27T32 410V92q0-5 1-7 6-27 33.5-44T129 15t70-12 57-3 57 3 70 12 62.5 26T479 85zM83 303q0 14 18 23.5t44.5 15 56.5 8 54 2.5 54-2.5 56.5-8 44.5-15 18-23.5v-39q-38 20-84.5 27.5T256 299t-88.5-7.5T83 264v39zm346-143q-38 19-84.5 25.5T256 192t-88.5-6.5T83 160v36q0 14 18 24t44.5 16 56.5 8.5 54 2.5 54-2.5 56.5-8.5 44.5-16 18-24v-36zM256 51q-24 0-54 2.5t-56.5 8-44.5 14T83 96t18 20.5 44.5 14 56.5 8 54 2.5 54-2.5 56.5-8 44.5-14T429 96t-18-20.5-44.5-14-56.5-8-54-2.5zm0 410q24 0 54-2.5t56.5-8.5 44.5-16 18-24v-39q-38 20-84.5 26t-88.5 6-88.5-6T83 371v39q0 14 18 24t44.5 16 56.5 8.5 54 2.5z" + "path": "M157 53l86-50q6-3 13-3t13 3l85 50-98 59zm248 30l62 36q13 6 13 22v71l-96 56v-66q0-13-12-22l-66-39zM32 212v-71q0-16 13-22l62-36 99 58-65 39q-13 8-13 22v66zm224-41l77 46v80l-77 45-77-45v-80zm224 100v100q0 15-13 22l-83 49V327zM128 442l-83-49q-13-7-13-22V271l96 56v115zm205 29l-64 38q-6 3-13 3t-13-3l-64-38V357l64 37q6 3 13 3t13-3l64-37v114z" }, "date-time": { "path": "M83 243v147q0 17 11 28t28 11h4q11 0 18.5 7t7.5 18-7.5 18.5T126 480h-4q-38 0-64-26t-26-64V154q0-38 26-64t64-26h6V26q0-11 7.5-18.5T154 0t18 7.5 7 18.5v38h122V26q0-11 7-18.5T326 0t18.5 7.5T352 26v38h6q38 0 64 26t26 64v4q0 11-7.5 18.5T422 184t-18-7.5-7-18.5v-4q0-17-11-28t-28-11h-6v19q0 11-7.5 18.5T326 160t-18-7.5-7-18.5v-19H179v19q0 11-7 18.5t-18 7.5-18.5-7.5T128 134v-19h-6q-17 0-28 11t-11 28v38h51q11 0 18.5 7.5T160 218t-7.5 18-18.5 7H83zm237-51q33 0 62 12.5t51 34.5 34.5 51 12.5 62-12.5 62-34.5 51-51 34.5-62 12.5-62-12.5-51-34.5-34.5-51-12.5-62 12.5-62 34.5-51 51-34.5 62-12.5zm0 269q23 0 42.5-8.5T397 429t23.5-35 8.5-42q0-23-8.5-42.5T397 275t-34.5-23.5T320 243q-22 0-42 8.5T243 275t-23.5 34.5T211 352q0 22 8.5 42t23.5 35 35 23.5 42 8.5zm55-90q9 7 9 19 0 11-7.5 18.5T358 416q-8 0-16-6l-45-39q-9-8-9-19v-46q0-11 7.5-18.5T314 280t18 7.5 7 18.5v34z", @@ -1347,14 +1347,14 @@ "path": "M486 115H26q-11 0-18.5-7T0 90t7.5-18.5T26 64h460q11 0 18.5 7.5T512 90t-7.5 18-18.5 7zm0 167H26q-11 0-18.5-7.5T0 256t7.5-18.5T26 230h460q11 0 18.5 7.5T512 256t-7.5 18.5T486 282zm0 166H26q-11 0-18.5-7.5T0 422t7.5-18 18.5-7h460q11 0 18.5 7t7.5 18-7.5 18.5T486 448z" }, "message-error": { - "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm45 256l74-73q9-11 9-23 0-13-9.5-22.5T352 128q-12 0-23 9l-73 74-73-74q-10-9-23-9t-22.5 9.5T128 160q0 12 9 23l74 73-74 73q-9 10-9 23t9.5 22.5T160 384t23-9l73-74 73 74q11 9 23 9 13 0 22.5-9.5T384 352t-9-23z", + "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm0 461q42 0 79.5-16t65.5-44 44-65.5 16-79.5-16-79.5-44-65.5-65.5-44T256 51t-79.5 16-65.5 44-44 65.5T51 256t16 79.5 44 65.5 65.5 44 79.5 16zm70-301q11 0 18.5 7.5T352 186t-7 18l-53 52 53 52q7 7 7 18t-7.5 18.5T326 352q-10 0-18-8l-52-52-52 52q-8 8-18 8-11 0-18.5-7.5T160 326q0-10 8-18l52-52-52-52q-8-8-8-18 0-11 7.5-18.5T186 160t18 7l52 53 52-53q7-7 18-7z", "acc": { "key": "ICON_MESSAGE_ERROR", "defaultText": "Error" } }, "message-information": { - "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm0 160q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9zm32 64q0-14-9-23t-23-9-23 9-9 23v160q0 14 9 23t23 9 23-9 9-23V224z", + "path": "M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm0 461q43 0 80.5-16t65-44 43.5-65 16-80-16-80.5-43.5-65-65-43.5T256 51t-80 16-65 43.5-44 65T51 256t16 80 44 65 65 44 80 16zm0-333q13 0 22.5 9.5T288 160t-9.5 22.5T256 192t-22.5-9.5T224 160t9.5-22.5T256 128zm0 115q11 0 18 7.5t7 18.5v102q0 11-7 18.5t-18 7.5-18.5-7.5T230 371V269q0-11 7.5-18.5T256 243z", "ltr": true, "acc": { "key": "ICON_MESSAGE_INFORMATION", @@ -1365,7 +1365,7 @@ "path": "M486 512q-10 0-17-7l-95-89H90q-38 0-64-26T0 326V90q0-38 26-64T90 0h332q38 0 64 26t26 64v396q0 11-7.5 18.5T486 512zM90 51q-17 0-28 11T51 90v236q0 17 11 28t28 11h294q11 0 18 7l59 55V90q0-17-11-28t-28-11H90zm166 173q-11 0-18.5-7.5T230 198v-76q0-11 7.5-18.5T256 96t18.5 7.5T282 122v76q0 11-7.5 18.5T256 224zm0 32q13 0 22.5 9.5T288 288t-9.5 22.5T256 320t-22.5-9.5T224 288t9.5-22.5T256 256z" }, "message-success": { - "path": "M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm150 183q10-9 10-23 0-13-9.5-22.5T384 128t-22 9L186 308l-68-63q-9-9-22-9t-22.5 9.5T64 268q0 15 10 24l91 83q9 9 21 9 13 0 23-9z", + "path": "M256 512q-53 0-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0t99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20zm0-461q-42 0-79.5 16T111 111t-44 65.5T51 256t16 79.5 44 65.5 65.5 44 79.5 16 79.5-16 65.5-44 44-65.5 16-79.5-16-79.5-44-65.5-65.5-44T256 51zm-43 301q-10 0-17-7l-71-63q-9-8-9-19t7.5-18.5T142 237q10 0 17 7l53 47 128-131q8-8 18-8 11 0 18.5 7.5T384 178q0 10-7 17L231 344q-8 8-18 8z", "ltr": true, "acc": { "key": "ICON_MESSAGE_SUCCESS", @@ -1373,7 +1373,7 @@ } }, "message-warning": { - "path": "M505 399q7 13 7 27 0 21-15.5 37.5T456 480H56q-25 0-40.5-16.5T0 426q0-14 7-27L208 59q17-27 48-27 14 0 27 6.5T304 59zM288 176q0-14-9-23t-23-9-23 9-9 23v96q0 14 9 23t23 9 23-9 9-23v-96zm-32 240q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9z", + "path": "M436 480H76q-31 0-53.5-21T0 407q0-21 10-37L191 68q10-17 27.5-26.5T256 32t37.5 9.5T321 68l181 302q10 16 10 37 0 31-22.5 52T436 480zM256 83q-15 0-21 12L54 396q-3 6-3 11 0 9 7.5 15.5T76 429h360q10 0 17.5-6.5T461 407q0-5-3-11L277 95q-6-12-21-12zm0 213q-11 0-18.5-7.5T230 270v-85q0-11 7.5-18.5T256 159t18.5 7.5T282 185v85q0 11-7.5 18.5T256 296zm0 105q-13 0-22-9t-9-23q0-13 9-22t22-9 22 9 9 22q0 14-9 23t-22 9z", "acc": { "key": "ICON_MESSAGE_WARNING", "defaultText": "Warning" @@ -1470,7 +1470,7 @@ "path": "M406 32q31 0 52.5 21.5T480 106v299q0 31-22 53t-53 22H106q-31 0-52.5-21.5T32 406V106q0-31 21.5-52.5T106 32h300zm23 74q0-10-6.5-16.5T406 83H106q-10 0-16.5 6.5T83 106v300q0 10 6.5 16.5T106 429h299q10 0 17-7t7-17V106zm-71 124q11 0 18.5 7.5T384 256t-7.5 18.5T358 282H153q-11 0-18-7.5t-7-18.5 7-18.5 18-7.5h205z" }, "newspaper": { - "path": "M417 352q0 12-7 18L275 505q-9 7-18 7H26q-11 0-18.5-7.5T0 486V26Q0 15 7.5 7.5T26 0h366q11 0 18 7.5t7 18.5v326zM486 0q11 0 18.5 7.5T512 26v460q0 11-7.5 18.5T486 512h-77q-11 0-18.5-7.5T383 486t7.5-18 18.5-7h52V26q0-11 7-18.5T486 0zM246 461l10-10v-55q0-18 13-31t31-13h56l10-10V51H51v410h195zM122 160q-11 0-18.5-7.5T96 134v-12q0-11 7.5-18.5T122 96h12q11 0 18.5 7.5T160 122v12q0 11-7.5 18.5T134 160h-12zm96 0q-11 0-18.5-7.5T192 134v-12q0-11 7.5-18.5T218 96h76q11 0 18.5 7.5T320 122v12q0 11-7.5 18.5T294 160h-76zm-96 80q-11 0-18.5-7.5T96 214t7.5-18.5T122 188h172q11 0 18.5 7.5T320 214t-7.5 18.5T294 240H122zm0 84q-11 0-18.5-7.5T96 298t7.5-18 18.5-7h172q11 0 18.5 7t7.5 18-7.5 18.5T294 324H122zm44 41q11 0 18.5 7t7.5 18-7.5 18.5T166 416h-44q-11 0-18.5-7.5T96 390t7.5-18 18.5-7h44z" + "path": "M416 352q0 12-8 18L275 505q-9 7-18 7H26q-11 0-18.5-7.5T0 486V26Q0 15 7.5 7.5T26 0h364q11 0 18.5 7.5T416 26v326zM486 0q11 0 18.5 7.5T512 26v460q0 11-7.5 18.5T486 512h-77q-11 0-18.5-7.5T383 486t7.5-18 18.5-7h52V26q0-11 7-18.5T486 0zM246 461l10-10v-55q0-18 13-31t31-13h56l10-10V51H51v410h195zM122 160q-11 0-18.5-7.5T96 134v-12q0-11 7.5-18.5T122 96h12q11 0 18.5 7.5T160 122v12q0 11-7.5 18.5T134 160h-12zm96 0q-11 0-18.5-7.5T192 134v-12q0-11 7.5-18.5T218 96h76q11 0 18.5 7.5T320 122v12q0 11-7.5 18.5T294 160h-76zm-96 80q-11 0-18.5-7.5T96 214t7.5-18.5T122 188h172q11 0 18.5 7.5T320 214t-7.5 18.5T294 240H122zm0 84q-11 0-18.5-7.5T96 298t7.5-18 18.5-7h172q11 0 18.5 7t7.5 18-7.5 18.5T294 324H122zm44 41q11 0 18.5 7t7.5 18-7.5 18.5T166 416h-44q-11 0-18.5-7.5T96 390t7.5-18 18.5-7h44z" }, "non-binary": { "path": "M280 258q45 8 74.5 43t29.5 83q0 26-10 49.5t-27.5 41T306 502t-50 10-50-10-40.5-27.5-27.5-41-10-49.5q0-46 28.5-81t72.5-44v-84l-41 41q-8 8-18 8-12 0-19-7.5t-7-18.5q0-10 8-18l68-68-68-69q-8-8-8-18 0-11 7.5-18T170 0t18 7l68 69 68-69q7-7 18-7 12 0 19 7t7 18-7 18l-69 69 69 68q7 7 7 18 0 12-7.5 19t-18.5 7q-10 0-18-8l-44-44v86zm-24 203q32 0 54.5-22.5T333 384t-22.5-54.5T256 307t-54.5 22.5T179 384t22.5 54.5T256 461z" @@ -1485,7 +1485,7 @@ "path": "M486 512q-10 0-18-8l-95-102H77q-32 0-54.5-22.5T0 325V77q0-32 22.5-54.5T77 0h358q32 0 54.5 22.5T512 77v409q0 11-7.5 18.5T486 512zM77 51q-11 0-18.5 7.5T51 77v248q0 11 7.5 18.5T77 351h307q11 0 19 8l58 62V77q0-11-7.5-18.5T435 51H77zm77 128q-11 0-18.5-7t-7.5-18 7.5-18.5T154 128h204q11 0 18.5 7.5T384 154t-7.5 18-18.5 7H154zm76 96q-11 0-18-7t-7-18 7-18.5 18-7.5h128q11 0 18.5 7.5T384 250t-7.5 18-18.5 7H230z" }, "notification": { - "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm45 256l74-73q9-11 9-23 0-13-9.5-22.5T352 128q-12 0-23 9l-73 74-73-74q-10-9-23-9t-22.5 9.5T128 160q0 12 9 23l74 73-74 73q-9 10-9 23t9.5 22.5T160 384t23-9l73-74 73 74q11 9 23 9 13 0 22.5-9.5T384 352t-9-23z" + "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm0 461q42 0 79.5-16t65.5-44 44-65.5 16-79.5-16-79.5-44-65.5-65.5-44T256 51t-79.5 16-65.5 44-44 65.5T51 256t16 79.5 44 65.5 65.5 44 79.5 16zm70-301q11 0 18.5 7.5T352 186t-7 18l-53 52 53 52q7 7 7 18t-7.5 18.5T326 352q-10 0-18-8l-52-52-52 52q-8 8-18 8-11 0-18.5-7.5T160 326q0-10 8-18l52-52-52-52q-8-8-8-18 0-11 7.5-18.5T186 160t18 7l52 53 52-53q7-7 18-7z" }, "number-sign": { "path": "M486 333q11 0 18.5 7t7.5 18-7.5 18.5T486 384H365l-15 106q-2 10-9 16t-16 6q-13 0-19.5-9t-6.5-20l14-99H162l-15 106q-2 10-9 16t-16 6q-13 0-19.5-9T96 483l14-99H26q-11 0-18.5-7.5T0 358t7.5-18 18.5-7h92l22-154H26q-11 0-18.5-7T0 154t7.5-18.5T26 128h121l15-106q2-10 9-16t16-6q13 0 19.5 9t6.5 20l-14 99h151l15-106q2-10 9-16t16-6q13 0 19.5 9t6.5 20l-14 99h84q11 0 18.5 7.5T512 154t-7.5 18-18.5 7h-92l-22 154h114zm-165 0l22-154H191l-22 154h152z" @@ -1582,10 +1582,10 @@ "ltr": true }, "pdf-attachment": { - "path": "M373.892 461q11 0 18.5 7t7.5 18-7.5 18.5-18.5 7.5h-332q-11 0-18.5-7.5t-7.5-18.5V192q0-10 6-17l143-166q6-9 19-9h190q11 0 18.5 7.5t7.5 18.5v76q0 11-7.5 18.5t-18.5 7.5-18-7.5-7-18.5V51h-153l-20 24v66q0 21-15 36t-36 15h-50l-8 9v260h307zm15-147q13-5 24.5-6.5t22.5-1.5q29 0 45.5 11.5t14.5 26.5q-1 11-10.5 15t-23.5 4q-20 0-43.5-6.5t-34.5-12.5l-97 23q-16 27-31 38t-26 11q-10 0-16-6.5t-6-16.5q0-13 13-27.5t45-22.5q14-22 24-43.5t17-43.5q-6-14-8.5-26.5t-2.5-23.5q0-23 8.5-34.5t19.5-11.5q9 0 16.5 10.5t7.5 33.5q0 10-1.5 22t-6.5 26q13 24 25.5 39t23.5 23zm-37 7q-14-12-23-29l-21 39z" + "path": "M294 96q-10 0-17-7l-39-38H83v19q0 11-7 18.5T58 96t-18.5-7.5T32 70V26q0-11 7.5-18.5T58 0h190q9 0 18 7l46 45q8 8 8.5 18T313 88t-19 8zm121 113v22h47q11 0 18.5 7t7.5 18-7.5 18.5T462 282h-47v47q0 11-7.5 18.5T389 355t-18-7.5-7-18.5V184q0-11 7-18.5t18-7.5h97q11 0 18.5 7.5T512 184t-7.5 18-18.5 7h-71zM74 158q31 0 52.5 21.5T148 232t-21.5 52.5T74 306H51v23q0 11-7 18.5T26 355t-18.5-7.5T0 329V184q0-11 7.5-18.5T26 158h48zm179 0q31 0 52.5 21.5T327 232v49q0 31-21.5 52.5T253 355h-49q-11 0-18-7.5t-7-18.5V184q0-11 7-18.5t18-7.5h49zM74 255q10 0 16.5-6.5T97 232q0-9-6.5-16T74 209H51v46h23zm202-23q0-9-7-16t-16-7h-23v95h23q9 0 16-7t7-16v-49zm114 280H26q-11 0-18.5-7.5T0 486v-44q0-11 7.5-18.5T26 416t18 7.5 7 18.5v19h314v-19q0-11 7-18.5t18-7.5 18.5 7.5T416 442v44q0 11-7.5 18.5T390 512z" }, "pdf-reader": { - "path": "M454 0q24 0 41 17t17 41v44q0 11-7.5 18.5T486 128t-18-7.5-7-18.5V58q0-7-7-7h-44q-11 0-18.5-7T384 26t7.5-18.5T410 0h44zM102 0q11 0 18.5 7.5T128 26t-7.5 18-18.5 7H58q-7 0-7 7v44q0 11-7 18.5T26 128t-18.5-7.5T0 102V58q0-24 17-41T58 0h44zm314 312q-2 11-11 15t-23 4q-20 0-43.5-6.5T304 312l-97 23q-16 27-31 38t-26 11q-10 0-16-6.5t-6-16.5q0-13 13-27.5t45-22.5q14-22 24-43.5t17-43.5q-6-14-8.5-26.5T216 174q0-23 8.5-34.5T244 128q9 0 16.5 10.5T268 172q0 10-1.5 22t-6.5 26q25 47 49 62 23-8 46-8 29 0 46 11.5t15 26.5zm-188-13l44-10q-14-12-23-29zm258 85q11 0 18.5 7.5T512 410v44q0 24-17 41t-41 17h-44q-11 0-18.5-7.5T384 486t7.5-18 18.5-7h44q7 0 7-7v-44q0-11 7-18.5t18-7.5zm-384 77q11 0 18.5 7t7.5 18-7.5 18.5T102 512H58q-24 0-41-17T0 454v-44q0-11 7.5-18.5T26 384t18 7.5 7 18.5v44q0 7 7 7h44z", + "path": "M486 128q-11 0-18-7.5t-7-18.5V58q0-7-7-7h-44q-11 0-18.5-7T384 26t7.5-18.5T410 0h44q24 0 41 17t17 41v44q0 11-7.5 18.5T486 128zm-460 0q-11 0-18.5-7.5T0 102V58q0-24 17-41T58 0h44q11 0 18.5 7.5T128 26t-7.5 18-18.5 7H58q-7 0-7 7v44q0 11-7 18.5T26 128zm389 81v21h47q11 0 18.5 7.5T488 256t-7.5 18.5T462 282h-47v47q0 11-7.5 18t-18.5 7-18-7-7-18V183q0-11 7-18t18-7h97q11 0 18.5 7t7.5 18-7.5 18.5T486 209h-71zM74 158q31 0 52.5 21.5T148 232t-21.5 52.5T74 306H51v23q0 11-7 18t-18 7-18.5-7T0 329V183q0-11 7.5-18t18.5-7h48zm179 0q31 0 52.5 21.5T327 232v48q0 31-21.5 52.5T253 354h-49q-11 0-18-7t-7-18V183q0-11 7-18t18-7h49zM74 255q10 0 16.5-7t6.5-16q0-10-6.5-16.5T74 209H51v46h23zm202-23q0-10-7-16.5t-16-6.5h-23v94h23q9 0 16-6.5t7-16.5v-48zm178 280h-44q-11 0-18.5-7.5T384 486t7.5-18 18.5-7h44q7 0 7-7v-44q0-11 7-18.5t18-7.5 18.5 7.5T512 410v44q0 24-17 41t-41 17zm-352 0H58q-24 0-41-17T0 454v-44q0-11 7.5-18.5T26 384t18 7.5 7 18.5v44q0 7 7 7h44q11 0 18.5 7t7.5 18-7.5 18.5T102 512z", "ltr": true }, "pending": { @@ -1927,14 +1927,14 @@ "path": "M486 0q11 0 18.5 7.5T512 26t-7.5 18-18.5 7h-38v19q0 11-7.5 18.5T422 96t-18-7.5-7-18.5V51h-45v19q0 11-7.5 18.5T326 96t-18-7.5-7-18.5V51h-45v19q0 11-7.5 18.5T230 96t-18-7.5-7-18.5V51h-45v19q0 11-7.5 18.5T134 96t-18-7.5-7-18.5V51H51v77h19q11 0 18.5 7.5T96 154t-7.5 18-18.5 7H51v45h19q11 0 18.5 7.5T96 250t-7.5 18-18.5 7H51v45h19q11 0 18.5 7.5T96 346t-7.5 18-18.5 7H51v45h19q11 0 18.5 7.5T96 442t-7.5 18-18.5 7H51v19q0 11-7 18.5T26 512t-18.5-7.5T0 486V26Q0 15 7.5 7.5T26 0h460zm-86 192q19 0 32.5 12.5T448 235v10q-2 18-15.5 30.5T400 288q-20 0-34-14t-14-34 14-34 34-14zm-39 101q10 1 16.5 8t6.5 17-6 16l-59 73q-7 9-19 9h-57v38q0 11-7.5 18.5T217 480t-18-7.5-7-18.5v-64q0-11 7-18t18-7h70l28-33q-10-5-21-12t-21-16.5-16.5-20.5-6.5-22 6.5-18.5T274 235q17 0 26 20 6 12 15.5 19.5T335 286t17.5 5.5 8.5 1.5z" }, "sort-ascending": { - "path": "M217 124q8 8 8 18 0 11-7.5 18.5T199 168q-10 0-17-7l-45-44v337q0 11-7 18.5t-18 7.5-18.5-7.5T86 454V119l-42 42q-7 7-18 7t-18.5-7.5T0 142q0-10 8-18l87-85q7-7 18-7 10 0 17 7zm65-9q-11 0-18.5-7T256 90t7.5-18.5T282 64h76q11 0 18.5 7.5T384 90t-7.5 18-18.5 7h-76zm0 128q-11 0-18.5-7t-7.5-18 7.5-18.5T282 192h140q11 0 18.5 7.5T448 218t-7.5 18-18.5 7H282zm204 77q11 0 18.5 7.5T512 346t-7.5 18-18.5 7H282q-11 0-18.5-7t-7.5-18 7.5-18.5T282 320h204z", + "path": "M358 147H154q-11 0-18.5-7t-7.5-18 7.5-18.5T154 96h204q11 0 18.5 7.5T384 122t-7.5 18-18.5 7zm64 128H90q-11 0-18.5-7T64 250t7.5-18.5T90 224h332q11 0 18.5 7.5T448 250t-7.5 18-18.5 7zm64 128H26q-11 0-18.5-7T0 378t7.5-18.5T26 352h460q11 0 18.5 7.5T512 378t-7.5 18-18.5 7z", "acc": { "key": "ICON_SORT_ASCENDING", "defaultText": "Sort Ascending" } }, "sort-descending": { - "path": "M182 351q7-7 17-7 11 0 18.5 7.5T225 370q0 10-8 18l-87 85q-7 7-17 7-11 0-18-7L8 388q-8-8-8-18 0-11 7.5-18.5T26 344t18 7l43 43V58q0-11 7.5-18.5T113 32t18 7.5 7 18.5v336zM486 64q11 0 18.5 7.5T512 90t-7.5 18-18.5 7H282q-11 0-18.5-7T256 90t7.5-18.5T282 64h204zm-64 128q11 0 18.5 7.5T448 218t-7.5 18-18.5 7H282q-11 0-18.5-7t-7.5-18 7.5-18.5T282 192h140zm-64 128q11 0 18.5 7.5T384 346t-7.5 18-18.5 7h-76q-11 0-18.5-7t-7.5-18 7.5-18.5T282 320h76z", + "path": "M486 96q11 0 18.5 7.5T512 122t-7.5 18-18.5 7H26q-11 0-18.5-7T0 122t7.5-18.5T26 96h460zm-64 128q11 0 18.5 7.5T448 250t-7.5 18-18.5 7H90q-11 0-18.5-7T64 250t7.5-18.5T90 224h332zm-64 128q11 0 18.5 7.5T384 378t-7.5 18-18.5 7H154q-11 0-18.5-7t-7.5-18 7.5-18.5T154 352h204z", "acc": { "key": "ICON_SORT_DESCENDING", "defaultText": "Sort Descending" @@ -2458,6 +2458,15 @@ }, "time-off": { "path": "M390 64q38 0 64 26t26 64v268q0 38-26 64t-64 26H122q-38 0-64-26t-26-64V154q0-38 26-64t64-26h6V26q0-11 7.5-18.5T154 0t18 7.5 7 18.5v38h154V26q0-11 7-18.5T358 0t18.5 7.5T384 26v38h6zm-268 51q-17 0-28 11t-11 28v51h346v-51q0-17-11-28t-28-11h-6v19q0 11-7.5 18.5T358 160t-18-7.5-7-18.5v-19H179v19q0 11-7 18.5t-18 7.5-18.5-7.5T128 134v-19h-6zm268 346q17 0 28-11t11-28V256H83v166q0 17 11 28t28 11h268zM160 320q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9zm208 0q16 0 16 16 0 6-5 11l-12 13 12 13q5 5 5 11 0 16-16 16-6 0-11-5l-13-12-13 12q-5 5-11 5-16 0-16-16 0-6 5-11l12-13-12-13q-5-5-5-11 0-16 16-16 6 0 11 5l13 12 13-12q5-5 11-5zm-96 0q16 0 16 16 0 6-5 11l-12 13 12 13q5 5 5 11 0 16-16 16-6 0-11-5l-13-12-13 12q-5 5-11 5-16 0-16-16 0-6 5-11l12-13-12-13q-5-5-5-11 0-16 16-16 6 0 11 5l13 12 13-12q5-5 11-5z" + }, + "ai": { + "path": "M502.5 109q-31 11-47 27t-27 48q-3 9-13 9t-13-9q-11-32-26.5-48t-47.5-27q-9-3-9-12.5t9-12.5q32-11 47.5-27t26.5-48q3-9 13-9t13 9q11 32 27 48t47 27q10 3 10 12.5t-10 12.5zm-167 250q-28 10-49.5 21.5T248.5 408 221 445t-21.5 50q-2 8-8.5 12.5t-14.5 4.5q-7 0-13.5-4.5t-9.5-12.5q-19-57-49-87t-87-49q-8-3-12-9.5t-4-13.5 4-13.5 12-9.5q29-10 50-21.5t37-27.5 27.5-37.5 21.5-49.5q3-8 9.5-12.5t13.5-4.5q8 0 14.5 4.5t8.5 12.5q10 28 21.5 49.5t27.5 37.5 37.5 27.5 49.5 21.5q8 3 12.5 9.5t4.5 13.5-4.5 13.5-12.5 9.5z" + }, + "da-2": { + "path": "M507.01 151.704q9.98 14.97 0 28.943L277.458 500.023q-7.984 10.979-20.959 10.979t-20.959-10.979L5.988 180.647q-11.976-14.97 0-29.941L114.776 9.98Q122.76 0 134.736 0h255.502q14.97 0 20.959 10.979zm-130.745 34.931q7.985-2.994 7.985-10.978t-7.985-10.979q-25.95-7.984-39.423-21.957T314.386 102.8q-1.996-7.984-9.98-7.984t-10.98 7.984q-7.984 25.95-21.956 39.922t-39.922 21.957q-7.985 2.995-7.985 10.979t7.985 10.978q25.95 7.985 39.922 21.459t21.957 39.423q2.994 7.984 10.978 7.984t9.981-7.984q8.982-25.95 22.456-39.423t39.423-21.459z" + }, + "da": { + "path": "M256.499 511.002q-12.975 0-20.959-10.979L5.988 180.647q-11.976-14.97 0-29.941L114.776 9.98Q122.76 0 134.736 0h255.502q14.97 0 20.959 10.979l95.813 140.725q9.98 14.97 0 28.943L277.458 500.023q-7.984 10.979-20.959 10.979zM57.887 166.674l198.612 275.462 198.612-276.46-77.848-114.775H147.712zm318.378 19.961q-25.95 7.985-39.423 21.459t-22.456 39.423q-1.996 7.984-9.98 7.984t-10.98-7.984q-8.982-25.95-22.455-39.423t-39.423-21.459q-7.985-2.994-7.985-10.978t7.985-10.979q25.95-7.984 39.423-21.957t22.456-39.922q2.994-7.984 10.978-7.984t9.981 7.984q8.982 25.95 22.456 39.922t39.423 21.957q7.985 2.995 7.985 10.979t-7.985 10.978z" } } } \ No newline at end of file diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index f7411bee8aef..e1dfe29d5a25 100644 --- a/packages/localization/CHANGELOG.md +++ b/packages/localization/CHANGELOG.md @@ -3,6 +3,100 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* declare webpackChunkName in generated dynamic imports for readable runtime bundle names ([#7835](https://github.com/SAP/ui5-webcomponents/issues/7835)) ([592a10b](https://github.com/SAP/ui5-webcomponents/commit/592a10b25a14da89885874c40c5c7a192b8b4d85)) + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **localization:** missing calendarWeekNumbering ([#7684](https://github.com/SAP/ui5-webcomponents/issues/7684)) ([01a9349](https://github.com/SAP/ui5-webcomponents/commit/01a9349c7ab5e3c046fa10034dc9aa99b840f3d0)) + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/README.md b/packages/localization/README.md index 2a1692c55ae2..c6462cffab79 100644 --- a/packages/localization/README.md +++ b/packages/localization/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Localization [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/localization/lib/generate-json-imports/cldr.js b/packages/localization/lib/generate-json-imports/cldr.js index d5b50d26ce80..c2f1552c7899 100644 --- a/packages/localization/lib/generate-json-imports/cldr.js +++ b/packages/localization/lib/generate-json-imports/cldr.js @@ -4,7 +4,7 @@ import assets from "@ui5/webcomponents-tools/assets-meta.js"; const allLocales = assets.locales.all; const imports = allLocales.map(locale => `import ${locale} from "../assets/cldr/${locale}.json";`).join("\n"); -const caseImports = allLocales.map(locale => `\t\tcase "${locale}": return (await import("../assets/cldr/${locale}.json")).default;`).join("\n"); +const caseImports = allLocales.map(locale => `\t\tcase "${locale}": return (await import(/* webpackChunkName: "ui5-webcomponents-cldr-${locale}" */ "../assets/cldr/${locale}.json")).default;`).join("\n"); const localesKeys = allLocales.join(","); const localesKeysStrArray = allLocales.map(_ => `"${_}"`).join(","); diff --git a/packages/localization/package.json b/packages/localization/package.json index 77a4776d65d9..02b2ccadc5b8 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -29,13 +29,13 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.18.0-rc.0", - "chromedriver": "116.0.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", + "chromedriver": "118.0.1", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.18.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" } } diff --git a/packages/localization/src/sap/ui/core/Configuration.ts b/packages/localization/src/sap/ui/core/Configuration.ts index fcc62cdc91f2..a5869be5d34f 100644 --- a/packages/localization/src/sap/ui/core/Configuration.ts +++ b/packages/localization/src/sap/ui/core/Configuration.ts @@ -18,6 +18,8 @@ const Configuration = { getOriginInfo: emptyFn, getFormatSettings: () => FormatSettings, getTimezone: () => getConfigTimezone() || TimezoneUtil.getLocalTimezone() as string, + // Calculate calendar week numbering by active format locale + getCalendarWeekNumbering: () => "Default", }; export default Configuration; diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index 5d9fa46e33c3..99c45b3a3a0d 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,194 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* **ui5-list:** shift+tab navigation in List ([#7728](https://github.com/SAP/ui5-webcomponents/issues/7728)) ([399b941](https://github.com/SAP/ui5-webcomponents/commit/399b941ebeae7b44f6dba9cd4e8ec7ebb6f283c6)) + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + + +### Bug Fixes + +* **ui5-segmented-button:** check for items before applying settings ([#7792](https://github.com/SAP/ui5-webcomponents/issues/7792)) ([7f11274](https://github.com/SAP/ui5-webcomponents/commit/7f112746d50381474ec86da5e428df79c17c6499)), closes [#7788](https://github.com/SAP/ui5-webcomponents/issues/7788) +* **ui5-time-picker:** check value before formatting ([#7793](https://github.com/SAP/ui5-webcomponents/issues/7793)) ([70deda8](https://github.com/SAP/ui5-webcomponents/commit/70deda85293d5e62e99530c9dc0747071d9ee59c)), closes [#7790](https://github.com/SAP/ui5-webcomponents/issues/7790) + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **FormSupport:** submit linebreaks in ui5-textarea ([#7757](https://github.com/SAP/ui5-webcomponents/issues/7757)) ([425e97b](https://github.com/SAP/ui5-webcomponents/commit/425e97bd5fa030155502f3b9c7022e0e1a3d3202)), closes [#7467](https://github.com/SAP/ui5-webcomponents/issues/7467) +* **ui5-button:** align styles to specification ([#7784](https://github.com/SAP/ui5-webcomponents/issues/7784)) ([0cf1201](https://github.com/SAP/ui5-webcomponents/commit/0cf1201c132c993f71b14f0cd06c00300d742b0c)), closes [#7352](https://github.com/SAP/ui5-webcomponents/issues/7352) +* **ui5-calendar:** focus date set in slot ([#7735](https://github.com/SAP/ui5-webcomponents/issues/7735)) ([842f047](https://github.com/SAP/ui5-webcomponents/commit/842f047844ac7f06716813c2fa0ebcb3ae64c9a7)), closes [#7693](https://github.com/SAP/ui5-webcomponents/issues/7693) +* **ui5-combobox:** announce value state header on focus ([#7751](https://github.com/SAP/ui5-webcomponents/issues/7751)) ([1941854](https://github.com/SAP/ui5-webcomponents/commit/194185400bb70a778359a721928ad3a99bd5f3a6)) +* **ui5-list:** removed unnecessary accessibility reading ([#7758](https://github.com/SAP/ui5-webcomponents/issues/7758)) ([2f6780f](https://github.com/SAP/ui5-webcomponents/commit/2f6780f45ee2b6c60ead36c54ae634276d959b2e)), closes [#7601](https://github.com/SAP/ui5-webcomponents/issues/7601) +* **ui5-popup:** add check for initial focused element id ([#7746](https://github.com/SAP/ui5-webcomponents/issues/7746)) ([ec80fae](https://github.com/SAP/ui5-webcomponents/commit/ec80faee410d07fa53756a8972fed29bc969c40f)), closes [#7711](https://github.com/SAP/ui5-webcomponents/issues/7711) +* **ui5-slider:** update labels on min and max change ([#7764](https://github.com/SAP/ui5-webcomponents/issues/7764)) ([14fd642](https://github.com/SAP/ui5-webcomponents/commit/14fd6423ce0ecd6d34074e81c53ff5e6bdfdf7c8)) +* **ui5-tabcontainer:** add margins for the Overflow buttons (start and end) ([#7745](https://github.com/SAP/ui5-webcomponents/issues/7745)) ([612f503](https://github.com/SAP/ui5-webcomponents/commit/612f50351afcf407a8f86457532f7da0e856d4b5)), closes [#7291](https://github.com/SAP/ui5-webcomponents/issues/7291) +* **ui5-textarea:** remove white space from value state message ([#7755](https://github.com/SAP/ui5-webcomponents/issues/7755)) ([3df7d03](https://github.com/SAP/ui5-webcomponents/commit/3df7d038e5c16d3c885bc186d0df3d37f34b2f61)) +* **ui5-textarea:** select exceeded text ([#7741](https://github.com/SAP/ui5-webcomponents/issues/7741)) ([5a510cf](https://github.com/SAP/ui5-webcomponents/commit/5a510cff52a1e8d19f38f33b4582f9555aa28527)) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + +### Reverts + +* **ui5-color-palette-item:** revert selected state feature ([#7782](https://github.com/SAP/ui5-webcomponents/issues/7782)) ([f24ff90](https://github.com/SAP/ui5-webcomponents/commit/f24ff9019287f1b0a83d543b6486e5eb4d34ed35)) + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + + +### Bug Fixes + +* **ui5-calendar:** adjust selected border color ([#7730](https://github.com/SAP/ui5-webcomponents/issues/7730)) ([45b11f9](https://github.com/SAP/ui5-webcomponents/commit/45b11f9e47be92d71058960bf7c0c5254cf8ca6a)) +* **ui5-color-picker:** fix hsl to rgb color conversion ([#7723](https://github.com/SAP/ui5-webcomponents/issues/7723)) ([4e95272](https://github.com/SAP/ui5-webcomponents/commit/4e9527225be27c957ea71f17a4cacb3bc065d6b7)), closes [#7660](https://github.com/SAP/ui5-webcomponents/issues/7660) +* **ui5-combobox:** exclude group from suggestions count ([#7713](https://github.com/SAP/ui5-webcomponents/issues/7713)) ([40ffa20](https://github.com/SAP/ui5-webcomponents/commit/40ffa2073410f655e4931bfbe7df0c1977f821fa)) +* **ui5-input:** add additional text to the item's announcement ([#7715](https://github.com/SAP/ui5-webcomponents/issues/7715)) ([6bcb970](https://github.com/SAP/ui5-webcomponents/commit/6bcb97039d6975f8e61f404dc8f6d2c72a249e6d)) +* **ui5-input:** update clear icon accessible name ([#7744](https://github.com/SAP/ui5-webcomponents/issues/7744)) ([5da1fbe](https://github.com/SAP/ui5-webcomponents/commit/5da1fbee98e7571056c52299324f185a51699f0e)) +* **ui5-popup:** apply responsive paddings as early as possible ([#7710](https://github.com/SAP/ui5-webcomponents/issues/7710)) ([f6e9ac4](https://github.com/SAP/ui5-webcomponents/commit/f6e9ac4d832f66aa3fca697a1b16200cf971b3d1)), closes [#7644](https://github.com/SAP/ui5-webcomponents/issues/7644) +* **ui5-tree-item-custom:** text wrapper allows proper alignment of flex content ([#7733](https://github.com/SAP/ui5-webcomponents/issues/7733)) ([46e89e7](https://github.com/SAP/ui5-webcomponents/commit/46e89e757a4a01875d3cd020eb6491f9677b9b77)), closes [#7483](https://github.com/SAP/ui5-webcomponents/issues/7483) + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + + +### Bug Fixes + +* **ui5-date-picker:** align value state colors with the spec ([#7676](https://github.com/SAP/ui5-webcomponents/issues/7676)) ([17a5b12](https://github.com/SAP/ui5-webcomponents/commit/17a5b122926720c3c2b07fc322cb480e867eb63a)) +* **ui5-step-input:** fix z-index of increase/decrease buttons and focus ([#7709](https://github.com/SAP/ui5-webcomponents/issues/7709)) ([8bb9c4c](https://github.com/SAP/ui5-webcomponents/commit/8bb9c4c51a726b350d427de31cbf99c2d8fc6b31)) +* **ui5-tabcontainer:** update according to latest SAP Horizon design ([#7668](https://github.com/SAP/ui5-webcomponents/issues/7668)) ([57ff771](https://github.com/SAP/ui5-webcomponents/commit/57ff771c82de51515a998ce09f3b3430ffd69c18)) + + +### Features + +* **ui5-combobox:** add attribute `no-typeahead` ([#7692](https://github.com/SAP/ui5-webcomponents/issues/7692)) ([4714835](https://github.com/SAP/ui5-webcomponents/commit/4714835990da6858f47462534b46978a9b0c65fc)) +* **ui5-panel:** enable custom styling of title ([#7688](https://github.com/SAP/ui5-webcomponents/issues/7688)) ([9d5a3d1](https://github.com/SAP/ui5-webcomponents/commit/9d5a3d1e95c7d163a91beb068169f2e7df39d4d5)) +* **ui5-rating-indicator:** introduce tooltip property ([#7687](https://github.com/SAP/ui5-webcomponents/issues/7687)) ([f2668b6](https://github.com/SAP/ui5-webcomponents/commit/f2668b6889259c7295b06fe47f846b434510f671)) +* update @ui5/webcomponents-icons to 5.07 & 4.19 ([#7708](https://github.com/SAP/ui5-webcomponents/issues/7708)) ([1732304](https://github.com/SAP/ui5-webcomponents/commit/173230467f93b227c37b54b666dcfcfec07bcab1)) + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **ui5-avatar:** a11y fixed ([#7636](https://github.com/SAP/ui5-webcomponents/issues/7636)) ([15a84f8](https://github.com/SAP/ui5-webcomponents/commit/15a84f87fcdba3d7e60364205d2dbf7bf9bca0a9)) +* **ui5-avatar:** prevent hover effect on non-interactive avatars ([#7611](https://github.com/SAP/ui5-webcomponents/issues/7611)) ([8a782f1](https://github.com/SAP/ui5-webcomponents/commit/8a782f1a2f7cff5b26bd3338f4cf61186953539e)) +* **ui5-checkbox:** fix horizon hcb and hcw ([#7686](https://github.com/SAP/ui5-webcomponents/issues/7686)) ([cef8881](https://github.com/SAP/ui5-webcomponents/commit/cef88813e01a8117dc0c824dec17b7cf6e1a71e3)) +* **ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider:** special character support for id ([#7634](https://github.com/SAP/ui5-webcomponents/issues/7634)) ([993f2b7](https://github.com/SAP/ui5-webcomponents/commit/993f2b73196827f6558322a82f2e22e0f1bb1d84)), closes [#7633](https://github.com/SAP/ui5-webcomponents/issues/7633) +* **ui5-menu:** prevent bubbling in events ([#7653](https://github.com/SAP/ui5-webcomponents/issues/7653)) ([6f5caf4](https://github.com/SAP/ui5-webcomponents/commit/6f5caf49def230e716b7534f83f27249caade7d7)), closes [#7637](https://github.com/SAP/ui5-webcomponents/issues/7637) +* **ui5-step-input:** align decrement icon ([#7654](https://github.com/SAP/ui5-webcomponents/issues/7654)) ([ce81085](https://github.com/SAP/ui5-webcomponents/commit/ce810853e707f682127ceb134011bb629859377a)) + + +### Features + +* **ui5-color-palette-item:** add selected state ([#7598](https://github.com/SAP/ui5-webcomponents/issues/7598)) ([6983f71](https://github.com/SAP/ui5-webcomponents/commit/6983f71acdaf3f94215d0fb86d9558db5b0b2887)) + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + + +### Bug Fixes + +* **ui5-calendar:** hide secondary type when same as primary ([#7650](https://github.com/SAP/ui5-webcomponents/issues/7650)) ([6ce7c33](https://github.com/SAP/ui5-webcomponents/commit/6ce7c3315c022c83d35b1121a50ef6fc4bb57dd7)) +* **ui5-label:** use correct i18n bundle & make component language aware ([#7652](https://github.com/SAP/ui5-webcomponents/issues/7652)) ([7b43587](https://github.com/SAP/ui5-webcomponents/commit/7b43587253e4873e49211a02a4a3923bc4a819f6)) + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + + +### Bug Fixes + +* **ui5-button:** update font params ([#7625](https://github.com/SAP/ui5-webcomponents/issues/7625)) ([b2ea9aa](https://github.com/SAP/ui5-webcomponents/commit/b2ea9aac43d296b777d1fcf8c1611fe75fdfb46d)) +* **ui5-list:** update horizon theme parameters ([#7614](https://github.com/SAP/ui5-webcomponents/issues/7614)) ([b0b8359](https://github.com/SAP/ui5-webcomponents/commit/b0b83597596248732f4bc92f968391aa67bb0355)) +* **ui5-message-strip:** remove button's custom width ([#7606](https://github.com/SAP/ui5-webcomponents/issues/7606)) ([bb8241a](https://github.com/SAP/ui5-webcomponents/commit/bb8241a94b4af5588c4583663da0f88490778cf7)) +* **ui5-multi-combobox:** correct usage of css var ([#7616](https://github.com/SAP/ui5-webcomponents/issues/7616)) ([c59c3bc](https://github.com/SAP/ui5-webcomponents/commit/c59c3bc1ccd130d36d1835450d8c7aaff8418e9c)) +* **ui5-slider:** adjust Horizon themes ([#7615](https://github.com/SAP/ui5-webcomponents/issues/7615)) ([4540766](https://github.com/SAP/ui5-webcomponents/commit/4540766a76595751323e2d2704f9fde69b80c36d)) +* **ui5-table:** improve Horizon styles ([#7609](https://github.com/SAP/ui5-webcomponents/issues/7609)) ([092537e](https://github.com/SAP/ui5-webcomponents/commit/092537e5616e23b88c46b93dc237593096c5c882)) + + +### Features + +* **ui5-time-picker:** mobile input and code optimization ([#7549](https://github.com/SAP/ui5-webcomponents/issues/7549)) ([50499ac](https://github.com/SAP/ui5-webcomponents/commit/50499ac1378deb18c18c649090591c0c36d44567)) + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + + +### Bug Fixes + +* **ui5-breadcrumbs:** infinite rerendering fixed ([#7589](https://github.com/SAP/ui5-webcomponents/issues/7589)) ([af8015b](https://github.com/SAP/ui5-webcomponents/commit/af8015b68a3a90cfec999863230d0f7b5298e206)) +* **ui5-button:** remove box shadows ([#7590](https://github.com/SAP/ui5-webcomponents/issues/7590)) ([555303a](https://github.com/SAP/ui5-webcomponents/commit/555303ab273fbe361c19de4ff5cf8dddddfd5e55)) +* **ui5-dialog:** fix background and shadow of slotted ui5-bar ([#7421](https://github.com/SAP/ui5-webcomponents/issues/7421)) ([2746460](https://github.com/SAP/ui5-webcomponents/commit/2746460ebd0d6517e8eedadde30b74e424c17a85)), closes [#7418](https://github.com/SAP/ui5-webcomponents/issues/7418) +* **ui5-input,ui5-textarea:** adjust disabled readonly visualisation ([#7568](https://github.com/SAP/ui5-webcomponents/issues/7568)) ([e97e35f](https://github.com/SAP/ui5-webcomponents/commit/e97e35f4570125965788a2c134022d7e289e4f81)) +* **ui5-input:** adjust button's size ([#7597](https://github.com/SAP/ui5-webcomponents/issues/7597)) ([b32dba1](https://github.com/SAP/ui5-webcomponents/commit/b32dba1dd5ca2874c4735bda8879b6ee82f149a9)) +* **ui5-input:** improve item announcement ([#7585](https://github.com/SAP/ui5-webcomponents/issues/7585)) ([292d15a](https://github.com/SAP/ui5-webcomponents/commit/292d15a0a7fcf468ecdfbff3048083b7014bf7c7)) +* **ui5-popover:** improve positioning when scrolling ([#7593](https://github.com/SAP/ui5-webcomponents/issues/7593)) ([a1b3bf6](https://github.com/SAP/ui5-webcomponents/commit/a1b3bf63875c04870e01ff715f603293a233444f)), closes [#7173](https://github.com/SAP/ui5-webcomponents/issues/7173) +* **ui5-segmented-button:** visual misalignments ([#7528](https://github.com/SAP/ui5-webcomponents/issues/7528)) ([d459fc2](https://github.com/SAP/ui5-webcomponents/commit/d459fc217bf6c63c1070743ea7d4447b08bdf2bc)) +* **ui5-switch:** fix text alignment in all themes ([#7416](https://github.com/SAP/ui5-webcomponents/issues/7416)) ([b4dea67](https://github.com/SAP/ui5-webcomponents/commit/b4dea675f5793c28ee9f0123d0e8bf6bd38c0b83)) + + +### Features + +* add `secondaryCalendarType` global config ([#7547](https://github.com/SAP/ui5-webcomponents/issues/7547)) ([c9111a3](https://github.com/SAP/ui5-webcomponents/commit/c9111a38fc2a6cc54bb696dbdcec66100e304906)) +* **ui5-checkbox:** update horizon theme paramaters ([#7576](https://github.com/SAP/ui5-webcomponents/issues/7576)) ([4d144dd](https://github.com/SAP/ui5-webcomponents/commit/4d144dd76001cd2eed284629b12de9d99b64f383)) +* **ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input:** add wrapping in suggestions and n-more ([#7509](https://github.com/SAP/ui5-webcomponents/issues/7509)) ([21528a0](https://github.com/SAP/ui5-webcomponents/commit/21528a0ae5f3cec84d30362eba79bb6fa08a75d4)) +* **ui5-split-button:** adapt visual design with new parameters ([#7584](https://github.com/SAP/ui5-webcomponents/issues/7584)) ([28997c8](https://github.com/SAP/ui5-webcomponents/commit/28997c8468acf8e5b33a8c174cf9368c31310eb0)) + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) diff --git a/packages/main/README.md b/packages/main/README.md index 0c101d956606..b4ea69c2aca5 100644 --- a/packages/main/README.md +++ b/packages/main/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Main [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js index daf14400b286..4d5a8e5d717a 100644 --- a/packages/main/bundle.common.js +++ b/packages/main/bundle.common.js @@ -84,6 +84,7 @@ import TimeSelection from "./dist/TimeSelection.js"; import TimePicker from "./dist/TimePicker.js"; import TimePickerClock from "./dist/TimePickerClock.js"; import TimeSelectionClocks from "./dist/TimeSelectionClocks.js"; +import TimeSelectionInputs from "./dist/TimeSelectionInputs.js"; import Title from "./dist/Title.js"; import Toast from "./dist/Toast.js"; import ToggleButton from "./dist/ToggleButton.js"; diff --git a/packages/main/package.json b/packages/main/package.json index 90fd46bc757e..6f85198b3870 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.18.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.0-rc.0", - "@ui5/webcomponents-icons": "1.18.0-rc.0", - "@ui5/webcomponents-localization": "1.18.0-rc.0", - "@ui5/webcomponents-theming": "1.18.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1", + "@ui5/webcomponents-icons": "1.20.0-rc.1", + "@ui5/webcomponents-localization": "1.20.0-rc.1", + "@ui5/webcomponents-theming": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.0", - "chromedriver": "116.0.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1", + "chromedriver": "118.0.1" } } diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index 0cabfd4906da..d71af5aed91f 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -182,12 +182,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the shape of the component. - *

    - * Available options are: - *
      - *
    • Circle
      • - *
    • Square
      • - *
    + * * @type {sap.ui.webc.main.types.AvatarShape} * @name sap.ui.webc.main.Avatar.prototype.shape * @defaultvalue "Circle" @@ -198,15 +193,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines predefined size of the component. - *

    - * Available options are: - *
      - *
    • XS
      • - *
    • S
      • - *
    • M
      • - *
    • L
      • - *
    • XL
      • - *
    + * * @type {sap.ui.webc.main.types.AvatarSize} * @name sap.ui.webc.main.Avatar.prototype.size * @defaultvalue "S" @@ -223,21 +210,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the background color of the desired image. - *

    - * Available options are: - *
      - *
    • Accent1
      • - *
    • Accent2
      • - *
    • Accent3
      • - *
    • Accent4
      • - *
    • Accent5
      • - *
    • Accent6
      • - *
    • Accent7
      • - *
    • Accent8
      • - *
    • Accent9
      • - *
    • Accent10
      • - *
    • Placeholder
      • - *
    + * * @type {sap.ui.webc.main.types.AvatarColorScheme} * @name sap.ui.webc.main.Avatar.prototype.colorScheme * @defaultvalue "Accent6" @@ -371,7 +344,7 @@ class Avatar extends UI5Element implements ITabbable { } get _role() { - return this._interactive ? "button" : undefined; + return this._interactive ? "button" : "img"; } get _ariaHasPopup() { diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 922eaedf5ae5..75cc9020407c 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -175,12 +175,7 @@ type AvatarGroupClickEventDetail = { class AvatarGroup extends UI5Element { /** * Defines the mode of the AvatarGroup. - *

    - * Available options are: - *
      - *
    • Group
      • - *
    • Individual
      • - *
    + * * @type {sap.ui.webc.main.types.AvatarGroupType} * @name sap.ui.webc.main.AvatarGroup.prototype.type * @defaultValue "Group" diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index bd9ac571c109..6cb8920afd66 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -138,7 +138,6 @@ type FocusAdaptor = ITabbable & { class Breadcrumbs extends UI5Element { /** * Defines the visual indication and behavior of the breadcrumbs. - * Available options are Standard (by default) and NoCurrentPage. *

    * Note: The Standard breadcrumbs show the current page as the last item in the trail. * The last item contains only plain text and is not a link. @@ -154,17 +153,6 @@ class Breadcrumbs extends UI5Element { /** * Determines the visual style of the separator between the breadcrumb items. * - *

    - * Available options are: - *
      - *
    • Slash
      • - *
    • BackSlash
      • - *
    • DoubleBackSlash
      • - *
    • DoubleGreaterThan
      • - *
    • DoubleSlash
      • - *
    • GreaterThan
      • - *
    - * * @type {sap.ui.webc.main.types.BreadcrumbsSeparatorStyle} * @name sap.ui.webc.main.Breadcrumbs.prototype.separatorStyle * @defaultvalue "Slash" @@ -360,7 +348,7 @@ class Breadcrumbs extends UI5Element { requiredWidth += this._dropdownArrowLinkWidth; } - while ((requiredWidth > availableWidth) && (overflowSize < this._maxAllowedOverflowSize)) { + while ((requiredWidth >= availableWidth) && (overflowSize < this._maxAllowedOverflowSize)) { const itemToOverflow = items[overflowSize]; let itemWidth = 0; diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 4885e558a350..0af5c780cf14 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -105,18 +105,6 @@ class Button extends UI5Element implements IFormElement { /** * Defines the component design. * - *

    - * The available values are: - * - *
      - *
    • Default
      • - *
    • Emphasized
      • - *
    • Positive
      • - *
    • Negative
      • - *
    • Transparent
      • - *
    • Attention
      • - *
    - * * @type {sap.ui.webc.main.types.ButtonDesign} * @name sap.ui.webc.main.Button.prototype.design * @defaultvalue "Default" @@ -254,15 +242,6 @@ class Button extends UI5Element implements IFormElement { * Defines whether the button has special form-related functionality. * *

    - * The available values are: - * - *
      - *
    • Button
      • - *
    • Submit
      • - *
    • Reset
      • - *
    - * - *

    * Note: For the type property to have effect, you must add the following import to your project: * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 38cae1860bbd..ae7f78d5108a 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -1,4 +1,5 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; @@ -257,6 +258,8 @@ class Calendar extends CalendarPart { @property({ type: CalendarPickersMode, defaultValue: CalendarPickersMode.DAY_MONTH_YEAR, noAttribute: true }) _pickersMode!: CalendarPickersMode; + _valueIsProcessed!: boolean + /** * Defines the selected date or dates (depending on the selectionMode property) * for this calendar as instances of ui5-date. @@ -280,6 +283,11 @@ class Calendar extends CalendarPart { }).filter((date): date is number => !!date); } + constructor() { + super(); + + this._valueIsProcessed = false; + } /** * @private */ @@ -315,6 +323,14 @@ class Calendar extends CalendarPart { onBeforeRendering() { this._normalizeCurrentPicker(); + + if (!this._valueIsProcessed) { + if (this._selectedDatesTimestamps) { + this.timestamp = this._selectedDatesTimestamps[0]; + } + + this._valueIsProcessed = true; + } } async onAfterRendering() { @@ -340,6 +356,12 @@ class Calendar extends CalendarPart { this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText(); } + onInvalidation(changeInfo: ChangeInfo) { + if (changeInfo.reason === "childchange") { + this._valueIsProcessed = false; + } + } + /** * The user clicked the "month" button in the header */ @@ -397,7 +419,7 @@ class Calendar extends CalendarPart { } get secondaryCalendarTypeButtonText() { - if (!this._secondaryCalendarType) { + if (!this.hasSecondaryCalendarType) { return; } diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts index c851177436c1..ead42669def6 100644 --- a/packages/main/src/CalendarHeader.ts +++ b/packages/main/src/CalendarHeader.ts @@ -188,7 +188,7 @@ class CalendarHeader extends UI5Element { } get hasSecondaryCalendarType() { - return !!this.secondaryCalendarType; + return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType; } get classes() { diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index da4fe4464941..48d5a176c464 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -24,7 +24,7 @@ import { // Styles import checkboxCss from "./generated/themes/CheckBox.css.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; // Template import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js"; @@ -222,17 +222,6 @@ class CheckBox extends UI5Element implements IFormElement { /** * Defines the value state of the component. * - *

    - * Note: - * - *
      - *
    • Warning
      • - *
    • Error
      • - *
    • None(default)
      • - *
    • Success
      • - *
    • Information
      • - *
    - * * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.CheckBox.prototype.valueState * @defaultvalue "None" @@ -315,9 +304,9 @@ class CheckBox extends UI5Element implements IFormElement { _enableFormSupport() { const formSupport = getFeature("FormSupport"); if (formSupport) { - formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: HTMLInputElement) => { + formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { nativeInput.disabled = !!element.disabled; - nativeInput.checked = !!element.checked; + (nativeInput as HTMLInputElement).checked = !!element.checked; nativeInput.value = element.checked ? "on" : ""; }); } else if (this.name) { diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 44dc5987541e..25594759b10f 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -162,6 +162,7 @@ class ColorPalette extends UI5Element { invalidateOnChildChange: true, individualSlots: true, }) + colors!: Array; _itemNavigation: ItemNavigation; @@ -228,6 +229,7 @@ class ColorPalette extends UI5Element { _setColor(color: string) { this._selectedColor = color; + if (this._recentColors[0] !== this._selectedColor) { if (this._recentColors.includes(this._selectedColor)) { this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]); diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts index d7e8df84d899..2c6e35ce13fb 100644 --- a/packages/main/src/ColorPicker.ts +++ b/packages/main/src/ColorPicker.ts @@ -412,9 +412,9 @@ class ColorPicker extends UI5Element { _calculateColorFromCoordinates(x: number, y: number) { // By using the selected coordinates(x = Lightness, y = Saturation) and hue(selected from the hue slider) // and HSL format, the color will be parsed to RGB - // 0 ≤ H < 360 - const h = this._hue / 4.25; + // 4.251 because with 4.25 we get out of the colors range. + const h = this._hue / 4.251; // 0 ≤ S ≤ 1 const s = 1 - +(Math.round(parseFloat((y / 256) + "e+2")) + "e-2"); // eslint-disable-line diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index b4cd080eeac1..0766e275fcb6 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -226,6 +226,18 @@ class ComboBox extends UI5Element { @property() value!: string; + /** + * Defines whether the value will be autocompleted to match an item + * + * @type {boolean} + * @name sap.ui.webc.main.ComboBox.prototype.noTypeahead + * @defaultvalue false + * @public + * @since 1.19.0 + */ + @property({ type: Boolean }) + noTypeahead!: boolean; + /** * Defines the "live" value of the component. *

    @@ -656,7 +668,7 @@ class ComboBox extends UI5Element { "historyUndo", ]; - return !allowedEventTypes.includes(eventType); + return !this.noTypeahead && !allowedEventTypes.includes(eventType); } _startsWithMatchingItems(str: string): Array { @@ -757,6 +769,7 @@ class ComboBox extends UI5Element { if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) { this._isValueStateFocused = true; + this._announceValueStateText(); this.focused = false; return; } @@ -780,6 +793,7 @@ class ComboBox extends UI5Element { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; + this._announceValueStateText(); this._filteredItems[0].selected = false; return; } @@ -803,6 +817,7 @@ class ComboBox extends UI5Element { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; + this._announceValueStateText(); return; } @@ -826,6 +841,7 @@ class ComboBox extends UI5Element { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; + this._announceValueStateText(); return; } @@ -1048,9 +1064,10 @@ class ComboBox extends UI5Element { _announceSelectedItem(indexOfItem: number) { const currentItem = this._filteredItems[indexOfItem]; + const nonGroupItems = this._filteredItems.filter(item => !item.isGroupItem); const currentItemAdditionalText = currentItem.additionalText || ""; const isGroupItem = currentItem?.isGroupItem; - const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, indexOfItem + 1, this._filteredItems.length); + const itemPositionText = ComboBox.i18nBundle.getText(LIST_ITEM_POSITION, nonGroupItems.indexOf(currentItem) + 1, nonGroupItems.length); const groupHeaderText = ComboBox.i18nBundle.getText(LIST_ITEM_GROUP_HEADER); if (isGroupItem) { @@ -1060,6 +1077,14 @@ class ComboBox extends UI5Element { } } + _announceValueStateText() { + const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" "); + + if (valueStateText) { + announce(valueStateText, InvisibleMessageMode.Polite); + } + } + get _headerTitleText() { return ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs index b36fe5422d00..239ad2f725e7 100644 --- a/packages/main/src/ComboBoxPopover.hbs +++ b/packages/main/src/ComboBoxPopover.hbs @@ -122,6 +122,7 @@ {{#*inline "listItem"}}
    - * Available options are: - *
      - *
    • None
      • - *
    • Error
      • - *
    • Warning
      • - *
    • Success
      • - *
    • Information
      • - *
    * * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.DatePicker.prototype.valueState diff --git a/packages/main/src/DayPicker.hbs b/packages/main/src/DayPicker.hbs index 54b10e8797fd..addbd74d5b70 100644 --- a/packages/main/src/DayPicker.hbs +++ b/packages/main/src/DayPicker.hbs @@ -1,5 +1,5 @@
    ; + let aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType) as Array; let dayName; + if (this.namesTooLong(aDayNamesAbbreviated)) { + aDayNamesAbbreviated = localeData.getDays("narrow", this._primaryCalendarType) as Array; + } + this._dayNames = []; this._dayNames.push({ classes: "ui5-dp-dayname", @@ -359,17 +363,24 @@ class DayPicker extends CalendarPart implements ICalendarPicker { ultraShortName: aDayNamesAbbreviated[dayOfTheWeek], classes: "ui5-dp-dayname", }; - this._dayNames.push(dayName); } - this._dayNames[1].classes += " ui5-dp-firstday"; - if (this.shouldHideWeekNumbers) { this._dayNames.shift(); } } + /** + * Tells if any of the days is more than 4 characters(too long to render). + * @param { Array } dayNames + * @returns { boolean } + * @private + */ + namesTooLong(dayNames: Array): boolean { + return dayNames.some(dayName => dayName.length > 3); + } + onAfterRendering() { if (this._autoFocus && !this._hidden) { this.focus(); @@ -730,8 +741,13 @@ class DayPicker extends CalendarPart implements ICalendarPicker { return this.hideWeekNumbers; } - get hasSecondaryCalendarType() { - return !!this.secondaryCalendarType; + get classes() { + return { + root: { + "ui5-dp-root": true, + "ui5-dp-twocalendartypes": this.hasSecondaryCalendarType, + }, + }; } _isWeekend(oDate: CalendarDate): boolean { diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index dc65878e40a2..353cde68fda1 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -184,10 +184,7 @@ class Dialog extends Popup { /** * Defines the state of the Dialog. - *

    - * Available options are: "None" (by default), "Success", "Warning", "Information" and "Error". - *

    - * Note: If "Error" and "Warning" state is set, it will change the + *
    Note: If "Error" and "Warning" state is set, it will change the * accessibility role to "alertdialog", if the accessibleRole property is set to "Dialog". * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.Dialog.prototype.state @@ -408,6 +405,8 @@ class Dialog extends Popup { } onAfterRendering() { + super.onAfterRendering(); + if (!this.isOpen() && this.open) { this.show(); } else if (this.isOpen() && !this.open) { diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index e730e95548ca..b9b8e32bef43 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -32,7 +32,7 @@ import FileUploaderCss from "./generated/themes/FileUploader.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; type FileUploaderChangeEventDetail = { files: FileList | null, @@ -183,16 +183,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines the value state of the component. - *

    - * Available options are: - *
      - *
    • None
      • - *
    • Error
      • - *
    • Warning
      • - *
    • Success
      • - *
    • Information
      • - *
    - * * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.FileUploader.prototype.valueState * @defaultvalue "None" @@ -337,7 +327,7 @@ class FileUploader extends UI5Element implements IFormElement { this._setFormValue(); } else { formSupport.syncNativeFileInput(this, - (element: IFormElement, nativeInput: HTMLInputElement) => { + (element: IFormElement, nativeInput: NativeFormElement) => { nativeInput.disabled = !!element.disabled; }, this._onChange.bind(this)); diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts index b6cea09dbde7..c8c6d342ff93 100644 --- a/packages/main/src/Icon.ts +++ b/packages/main/src/Icon.ts @@ -139,20 +139,6 @@ class Icon extends UI5Element { /** * Defines the component semantic design. * - *

    - * The available values are: - * - *
      - *
    • Contrast
      • - *
    • Critical
      • - *
    • Default
      • - *
    • Information
      • - *
    • Negative
      • - *
    • Neutral
      • - *
    • NonInteractive
      • - *
    • Positive
      • - *
    - * * @type {sap.ui.webc.main.types.IconDesign} * @name sap.ui.webc.main.Icon.prototype.design * @defaultvalue "Default" diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs index b30c84b80712..c2556e226ad5 100644 --- a/packages/main/src/Input.hbs +++ b/packages/main/src/Input.hbs @@ -41,7 +41,7 @@ {{#if effectiveShowClearIcon}}
    - +
    {{/if}} diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index c1610b1b1b80..0dde49a3a0c2 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -46,7 +46,7 @@ import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; import "@ui5/webcomponents-icons/dist/information.js"; import type SuggestionItem from "./SuggestionItem.js"; -import type { InputSuggestionText, SuggestionComponent } from "./features/InputSuggestions.js"; +import type { InputSuggestion, SuggestionComponent } from "./features/InputSuggestions.js"; import type InputSuggestions from "./features/InputSuggestions.js"; import type FormSupportT from "./features/InputElementsFormSupport.js"; import type { IFormElement } from "./features/InputElementsFormSupport.js"; @@ -74,6 +74,7 @@ import { INPUT_SUGGESTIONS_ONE_HIT, INPUT_SUGGESTIONS_MORE_HITS, INPUT_SUGGESTIONS_NO_HIT, + INPUT_CLEAR_ICON_ACC_NAME, } from "./generated/i18n/i18n-defaults.js"; // Styles @@ -627,7 +628,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { typedInValue: string; lastConfirmedValue: string isTyping: boolean - suggestionsTexts: Array; + suggestionObjects: Array; _handleResizeBound: ResizeObserverCallback; _keepInnerValue: boolean; _shouldAutocomplete?: boolean; @@ -677,7 +678,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { this.isTyping = false; // Suggestions array initialization - this.suggestionsTexts = []; + this.suggestionObjects = []; this._handleResizeBound = this._handleResize.bind(this); @@ -702,7 +703,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { if (this.showSuggestions) { this.enableSuggestions(); - this.suggestionsTexts = this.Suggestions!.defaultSlotProperties(this.typedInValue); + this.suggestionObjects = this.Suggestions!.defaultSlotProperties(this.typedInValue); } this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled); @@ -1491,13 +1492,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { } announceSelectedItem() { - const invisibleText = this.shadowRoot!.querySelector(`#${this._id}-selectionText`)!; + const invisibleText = this.shadowRoot!.querySelector(`[id="${this._id}-selectionText"]`)!; - if (this.Suggestions && this.Suggestions._isItemOnTarget()) { - invisibleText.textContent = this.itemSelectionAnnounce; - } else { - invisibleText.textContent = ""; - } + invisibleText.textContent = this.itemSelectionAnnounce; } get _readonly() { @@ -1508,6 +1505,10 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { return Input.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } + get clearIconAccessibleName() { + return Input.i18nBundle.getText(INPUT_CLEAR_ICON_ACC_NAME); + } + get inputType() { return this.type.toLowerCase(); } @@ -1654,7 +1655,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { get availableSuggestionsCount() { if (this.showSuggestions && (this.value || this.Suggestions!.isOpened())) { - switch (this.suggestionsTexts.length) { + const nonGroupItems = this.suggestionObjects.filter(item => !item.groupItem); + + switch (nonGroupItems.length) { case 0: return Input.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT); @@ -1662,7 +1665,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { return Input.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT); default: - return Input.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, this.suggestionsTexts.length); + return Input.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length); } } diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs index 763ab23cc24d..91cb82c4a117 100644 --- a/packages/main/src/InputPopover.hbs +++ b/packages/main/src/InputPopover.hbs @@ -94,11 +94,12 @@ {{#*inline "suggestionsList"}} - {{#each suggestionsTexts}} + {{#each suggestionObjects}} {{#if groupItem}} {{{ this.text }}} {{else}}
    - * Note: Available options are None, SingleSelect, SingleSelectBegin, - * SingleSelectEnd, MultiSelect, and Delete. * * @type {sap.ui.webc.main.types.ListMode} * @name sap.ui.webc.main.List.prototype.mode @@ -325,14 +322,6 @@ class List extends UI5Element { /** * Defines the item separator style that is used. - *

    - * Notes: - *
      - *
    • Avalaible options are All, Inner, and None.
      • - *
    • When set to None, none of the items are separated by horizontal lines.
      • - *
    • When set to Inner, the first item doesn't have a top separator and the last - * item doesn't have a bottom separator.
      • - *
    * * @type {sap.ui.webc.main.types.ListSeparators} * @name sap.ui.webc.main.List.prototype.separators @@ -346,17 +335,6 @@ class List extends UI5Element { * Defines whether the component will have growing capability either by pressing a More button, * or via user scroll. In both cases load-more event is fired. *

    - * - * Available options: - *

    - * Button - Shows a More button at the bottom of the list, - * pressing of which triggers the load-more event. - *
    - * Scroll - The load-more event is triggered when the user scrolls to the bottom of the list; - *
    - * None (default) - The growing is off. - *

    - * * Restrictions: growing="Scroll" is not supported for Internet Explorer, * on IE the component will fallback to growing="Button". * @type {sap.ui.webc.main.types.ListGrowingMode} @@ -618,14 +596,16 @@ class List extends UI5Element { } get ariaLabelModeText(): string { - if (this.isMultiSelect) { - return List.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE); - } - if (this.isSingleSelect) { - return List.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE); - } - if (this.isDelete) { - return List.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE); + if (this.hasData) { + if (this.isMultiSelect) { + return List.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE); + } + if (this.isSingleSelect) { + return List.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE); + } + if (this.isDelete) { + return List.i18nBundle.getText(ARIA_LABEL_LIST_DELETABLE); + } } return ""; @@ -947,6 +927,11 @@ class List extends UI5Element { return afterElement && afterElement.id === elementId; } + onItemTabIndexChange(e: CustomEvent) { + const target = e.target as ListItemBase; + this._itemNavigation.setCurrentItem(target); + } + onItemFocused(e: CustomEvent) { const target = e.target as ListItemBase; @@ -1041,7 +1026,7 @@ class List extends UI5Element { } getGrowingButton() { - return this.shadowRoot!.querySelector(`#${this._id}-growing-btn`) as HTMLElement; + return this.shadowRoot!.querySelector(`[id="${this._id}-growing-btn"]`) as HTMLElement; } /** @@ -1127,14 +1112,14 @@ class List extends UI5Element { getAfterElement() { if (!this._afterElement) { - this._afterElement = this.shadowRoot!.querySelector(`#${this._id}-after`) as HTMLElement; + this._afterElement = this.shadowRoot!.querySelector(`[id="${this._id}-after"]`) as HTMLElement; } return this._afterElement; } getBeforeElement() { if (!this._beforeElement) { - this._beforeElement = this.shadowRoot!.querySelector(`#${this._id}-before`) as HTMLElement; + this._beforeElement = this.shadowRoot!.querySelector(`[id="${this._id}-before"]`) as HTMLElement; } return this._beforeElement; } diff --git a/packages/main/src/ListItemBase.ts b/packages/main/src/ListItemBase.ts index 2055fc4aa08d..08f3ebf677dd 100644 --- a/packages/main/src/ListItemBase.ts +++ b/packages/main/src/ListItemBase.ts @@ -27,6 +27,7 @@ import styles from "./generated/themes/ListItemBase.css.js"; renderer: litRender, styles, }) +@event("_request-tabindex-change") @event("_focused") @event("_forward-after") @event("_forward-before") @@ -72,6 +73,7 @@ class ListItemBase extends UI5Element implements ITabbable { focused!: boolean; _onfocusin(e: FocusEvent) { + this.fireEvent("_request-tabindex-change", e); if (e.target !== this.getFocusDomRef()) { return; } diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index b015b1095ed4..373d4fd4f197 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -495,7 +495,7 @@ class Menu extends UI5Element { const mainMenu = this._findMainMenu(item); mainMenu.fireEvent("before-open", { item, - }); + }, false, false); item._subMenu!.showAt(opener); item._preventSubMenuClose = true; this._openedSubMenuItem = item; @@ -702,7 +702,7 @@ class Menu extends UI5Element { _afterPopoverOpen() { this.open = true; - this.fireEvent("after-open"); + this.fireEvent("after-open", {}, false, false); } _beforePopoverClose(e: CustomEvent) { @@ -722,7 +722,7 @@ class Menu extends UI5Element { _afterPopoverClose() { this.open = false; - this.fireEvent("after-close"); + this.fireEvent("after-close", {}, false, false); } } diff --git a/packages/main/src/MonthPicker.ts b/packages/main/src/MonthPicker.ts index bf57838b9f3f..2a42340e7b26 100644 --- a/packages/main/src/MonthPicker.ts +++ b/packages/main/src/MonthPicker.ts @@ -167,7 +167,7 @@ class MonthPicker extends CalendarPart implements ICalendarPicker { selected: isSelected, ariaSelected: isSelected ? "true" : "false", name: monthsNames[i], - nameInSecType: this.secondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text, + nameInSecType: this.hasSecondaryCalendarType && this._getDisplayedSecondaryMonthText(timestamp).text, disabled: isDisabled, classes: "ui5-mp-item", }; diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts index 739df848ad2f..fb74df8aff88 100644 --- a/packages/main/src/MultiComboBox.ts +++ b/packages/main/src/MultiComboBox.ts @@ -55,6 +55,7 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; import "@ui5/webcomponents-icons/dist/information.js"; import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js"; +import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; import MultiComboBoxItem from "./MultiComboBoxItem.js"; import MultiComboBoxGroupItem from "./MultiComboBoxGroupItem.js"; import GroupHeaderListItem from "./GroupHeaderListItem.js"; @@ -1438,7 +1439,7 @@ class MultiComboBox extends UI5Element { }); this.tokenizerAvailable = this._getSelectedItems().length > 0; - this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`); + this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`); if (!input || !value) { return; diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs index 8821332c0e09..7083f6ed65ea 100644 --- a/packages/main/src/MultiComboBoxPopover.hbs +++ b/packages/main/src/MultiComboBoxPopover.hbs @@ -128,6 +128,7 @@ {{#*inline "listItem"}}
    - * Available options are: - *
      - *
    • None
      • - *
    • Error
      • - *
    • Warning
      • - *
    • Success
      • - *
    • Information
      • - *
    * * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.ProgressIndicator.prototype.valueState diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs index 0d6ff1443021..29c1d3fda23b 100644 --- a/packages/main/src/RatingIndicator.hbs +++ b/packages/main/src/RatingIndicator.hbs @@ -14,7 +14,7 @@ @focusout="{{_onfocusout}}" @click="{{_onclick}}" @keydown="{{_onkeydown}}" - title="{{tooltip}}" + title="{{ratingTooltip}}" aria-label="{{_ariaLabel}}" >

      - * Available options are: - *
        - *
      • None
        • - *
      • Error
        • - *
      • Warning
        • - *
      • Success
        • - *
      • Information
        • - *
      * * @type {sap.ui.webc.base.types.ValueState} * @defaultvalue "None" @@ -680,7 +671,7 @@ class Select extends UI5Element implements IFormElement { _enableFormSupport() { const formSupport = getFeature("FormSupport"); if (formSupport) { - formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: HTMLInputElement) => { + formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { const selectElement = (element as Select); nativeInput.disabled = !!element.disabled; nativeInput.value = selectElement._currentlySelectedOption ? selectElement._currentlySelectedOption.value : ""; diff --git a/packages/main/src/SelectMenuOption.ts b/packages/main/src/SelectMenuOption.ts index ef3c3a7539fa..6f6578160405 100644 --- a/packages/main/src/SelectMenuOption.ts +++ b/packages/main/src/SelectMenuOption.ts @@ -112,6 +112,7 @@ class SelectMenuOption extends CustomListItem implements IOption { * Note: The slot is inherited and not supported. If set, it won't take any effect. * * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton + * @type {Node[]} * @slot * @public * @deprecated diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts index ceac033e8ef7..ea958d41f9d6 100644 --- a/packages/main/src/SliderBase.ts +++ b/packages/main/src/SliderBase.ts @@ -173,6 +173,8 @@ abstract class SliderBase extends UI5Element { _isUserInteraction = false; _isInnerElementFocusing = false; _oldNumberOfLabels?: number; + _oldMin?: number; + _oldMax?: number; _labelWidth = 0; _labelValues?: Array; @@ -631,10 +633,12 @@ abstract class SliderBase extends UI5Element { const newNumberOfLabels = (this._effectiveMax - this._effectiveMin) / (step * labelInterval); // If the required labels are already rendered - if (newNumberOfLabels === this._oldNumberOfLabels) { + if (newNumberOfLabels === this._oldNumberOfLabels && this._oldMin === this._effectiveMin && this._oldMax === this._effectiveMax) { return; } + this._oldMin = this._effectiveMin; + this._oldMax = this._effectiveMax; this._oldNumberOfLabels = newNumberOfLabels; this._labelWidth = 100 / newNumberOfLabels; this._labelValues = []; diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index ce24c642575e..4d2e89622258 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -135,18 +135,6 @@ class SplitButton extends UI5Element { /** * Defines the component design. * - *

      - * The available values are: - * - *
        - *
      • Default
        • - *
      • Emphasized
        • - *
      • Positive
        • - *
      • Negative
        • - *
      • Transparent
        • - *
      • Attention
        • - *
      - * * @type {sap.ui.webc.main.types.ButtonDesign} * @name sap.ui.webc.main.SplitButton.prototype.design * @defaultvalue "Default" diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 258645f5fa08..86bb14c6c8a9 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -116,6 +116,8 @@ class StepInput extends UI5Element implements IFormElement { * * @name sap.ui.webc.main.StepInput.prototype.value * @type {sap.ui.webc.base.types.Float} + * @formEvents change + * @formProperty * @defaultvalue 0 * @public */ @@ -155,15 +157,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the value state of the component. - *

      - * Available options are: - *
        - *
      • None
        • - *
      • Error
        • - *
      • Warning
        • - *
      • Success
        • - *
      • Information
        • - *
      * * @name sap.ui.webc.main.StepInput.prototype.valueState * @type {sap.ui.webc.base.types.ValueState} diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index b37528463932..d5086456ae37 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -16,7 +16,7 @@ import "@ui5/webcomponents-icons/dist/decline.js"; import "@ui5/webcomponents-icons/dist/less.js"; import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; import Icon from "./Icon.js"; import SwitchDesign from "./types/SwitchDesign.js"; @@ -245,9 +245,9 @@ class Switch extends UI5Element implements IFormElement { _enableFormSupport() { const formSupport = getFeature("FormSupport"); if (formSupport) { - formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: HTMLInputElement) => { + formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { const switchComponent = (element as Switch); - nativeInput.checked = !!switchComponent.checked; + (nativeInput as HTMLInputElement).checked = !!switchComponent.checked; nativeInput.disabled = !!switchComponent.disabled; nativeInput.value = switchComponent.checked ? "on" : ""; }); diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index f3e9761ed3f8..492e4867d13a 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -21,7 +21,6 @@ import { isLeft, isUp, } from "@ui5/webcomponents-base/dist/Keys.js"; -import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js"; @@ -301,15 +300,6 @@ class TabContainer extends UI5Element { @property({ type: TabContainerTabsPlacement, defaultValue: TabContainerTabsPlacement.Top }) tabsPlacement!: `${TabContainerTabsPlacement}`; - /** - * Defines the current media query size. - * - * @type {string} - * @private - */ - @property() - mediaRange!: string; - @property({ type: Object }) _selectedTab!: Tab; @@ -458,18 +448,14 @@ class TabContainer extends UI5Element { this.responsivePopover.close(); } + // invalidate this._width = this.offsetWidth; - this._updateMediaRange(this._width); - } - - _updateMediaRange(width: number) { - this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width); } _setItemsPrivateProperties(items: Array) { // set real dom ref to all items, then return only the tabs for further processing const allTabs = items.filter(item => { - item._getElementInStrip = () => this.getDomRef()!.querySelector(`#${item._id}`); + item._getElementInStrip = () => this.getDomRef()!.querySelector(`[id="${item._id}"]`); return !item.isSeparator; }); diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index 2a405b93cf57..7930cf4c1c63 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -918,7 +918,7 @@ class Table extends UI5Element { _getAfterForwardElement(): HTMLElement { if (!this._afterElement) { - this._afterElement = this.shadowRoot!.querySelector(`#${this._id}-after`)!; + this._afterElement = this.shadowRoot!.querySelector(`[id="${this._id}-after"]`)!; } return this._afterElement; @@ -926,7 +926,7 @@ class Table extends UI5Element { _getBeforeForwardElement(): HTMLElement { if (!this._beforeElement) { - this._beforeElement = this.shadowRoot!.querySelector(`#${this._id}-before`)!; + this._beforeElement = this.shadowRoot!.querySelector(`[id="${this._id}-before"]`)!; } return this._beforeElement; diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 0b52170f2453..5e5631dbb386 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -120,9 +120,11 @@ class TextArea extends UI5Element implements IFormElement { * * @type {string} * @name sap.ui.webc.main.TextArea.prototype.value + * @formEvents change input + * @formProperty * @defaultvalue "" * @public - */ + */ @property() value!: string; /** @@ -405,7 +407,7 @@ class TextArea extends UI5Element implements IFormElement { const FormSupport = getFeature("FormSupport"); if (FormSupport) { - FormSupport.syncNativeHiddenInput(this); + FormSupport.syncNativeHiddenTextArea(this); } else if (this.name) { console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line } @@ -474,6 +476,12 @@ class TextArea extends UI5Element implements IFormElement { } this.value = nativeTextArea.value; + const valueLength = this.value.length; + + if (e.inputType === "insertFromPaste" && this.maxlength && valueLength > this.maxlength) { + nativeTextArea.setSelectionRange(this.maxlength, valueLength); + } + this.fireEvent("input", {}); // Angular two way data binding @@ -568,6 +576,7 @@ class TextArea extends UI5Element implements IFormElement { "ui5-content-native-scrollbars": getEffectiveScrollbarStyle(), }, valueStateMsg: { + "ui5-valuestatemessage-header": true, "ui5-valuestatemessage--error": this.valueState === ValueState.Error, "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, diff --git a/packages/main/src/TimePicker.hbs b/packages/main/src/TimePicker.hbs index a950e2f8836b..43a3dca1dd88 100644 --- a/packages/main/src/TimePicker.hbs +++ b/packages/main/src/TimePicker.hbs @@ -1,4 +1,7 @@ -
      +
      {{#if valueStateMessage.length}} - + {{/if}} {{#unless readonly}} diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 91741035657a..5a40eda1f44e 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -116,7 +116,9 @@ class TimePicker extends TimePickerBase { formatPattern!: string; onBeforeRendering() { - this.value = this.normalizeValue(this.value!) || this.value; + if (this.value) { + this.value = this.normalizeValue(this.value) || this.value; + } } get _formatPattern() { diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts index 4d2dacd4bf83..abbcab547b6d 100644 --- a/packages/main/src/TimePickerBase.ts +++ b/packages/main/src/TimePickerBase.ts @@ -1,3 +1,4 @@ +import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; @@ -26,12 +27,14 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import "@ui5/webcomponents-icons/dist/time-entry-request.js"; import Icon from "./Icon.js"; +import Popover from "./Popover.js"; import ResponsivePopover from "./ResponsivePopover.js"; import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js"; import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js"; import Input from "./Input.js"; import Button from "./Button.js"; import TimeSelectionClocks from "./TimeSelectionClocks.js"; +import TimeSelectionInputs from "./TimeSelectionInputs.js"; import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js"; import { @@ -42,6 +45,7 @@ import { // Styles import TimePickerCss from "./generated/themes/TimePicker.css.js"; import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js"; +import PopoverCss from "./generated/themes/Popover.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; type TimePickerBaseChangeInputEventDetail = { @@ -68,11 +72,13 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail; template: TimePickerTemplate, styles: TimePickerCss, staticAreaTemplate: TimePickerPopoverTemplate, - staticAreaStyles: [ResponsivePopoverCommonCss, TimePickerPopoverCss], + staticAreaStyles: [ResponsivePopoverCommonCss, PopoverCss, TimePickerPopoverCss], dependencies: [ Icon, + Popover, ResponsivePopover, TimeSelectionClocks, + TimeSelectionInputs, Input, Button, ], @@ -174,6 +180,9 @@ class TimePickerBase extends UI5Element { @property({ type: Boolean, noAttribute: true }) _isPickerOpen!: boolean; + @property({ type: Boolean, noAttribute: true }) + _isInputsPopoverOpen!: boolean; + /** * Defines the value state message that will be displayed as pop up under the ui5-time-picker. *

      @@ -230,10 +239,60 @@ class TimePickerBase extends UI5Element { return this.tempValue; } + get _isPhone() { + return isPhone(); + } + onTimeSelectionChange(e: CustomEvent) { this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue } + /** + * Opens the picker. + * @async + * @public + * @method + * @name sap.ui.webc.main.TimePickerBase#openPicker + * @returns {Promise} Resolves when the picker is open + */ + async openPicker() { + this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); + const responsivePopover = await this._getPopover(); + responsivePopover.showAt(this); + } + + /** + * Closes the picker + * @public + * @method + * @name sap.ui.webc.main.TimePickerBase#closePicker + * @returns {Promise} Resolves when the picker is closed + */ + async closePicker() { + const responsivePopover = await this._getPopover(); + responsivePopover.close(); + this._isPickerOpen = false; + } + + togglePicker() { + if (this.isOpen()) { + this.closePicker(); + } else if (this._canOpenPicker()) { + this.openPicker(); + } + } + + /** + * Checks if the picker is open + * @public + * @method + * @name sap.ui.webc.main.TimePickerBase#isOpen + * @returns {boolean} + */ + isOpen() { + return !!this._isPickerOpen; + } + submitPickers() { this._updateValueAndFireEvents(this.tempValue!, true, ["change", "value-changed"]); this.closePicker(); @@ -243,11 +302,82 @@ class TimePickerBase extends UI5Element { this._isPickerOpen = false; } - async _handleInputClick() { + async onResponsivePopoverAfterOpen() { + this._isPickerOpen = true; + const responsivePopover = await this._getPopover(); + responsivePopover.querySelector("[ui5-time-selection-clocks]")!._focusFirstButton(); + } + + /** + * Opens the Inputs popover. + * @async + * @private + * @method + * @name sap.ui.webc.main.TimePickerBase#openInputsPopover + * @returns {Promise} Resolves when the Inputs popover is open + */ + async openInputsPopover() { + this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); + const popover = await this._getInputsPopover(); + popover.showAt(this); + this._isInputsPopoverOpen = true; + } + + /** + * Closes the Inputs popover + * @private + * @method + * @name sap.ui.webc.main.TimePickerBase#closeInputsPopover + * @returns {Promise} Resolves when the Inputs popover is closed + */ + async closeInputsPopover() { + const popover = await this._getInputsPopover(); + popover.close(); + } + + toggleInputsPopover() { + if (this.isInputsPopoverOpen()) { + this.closeInputsPopover(); + } else if (this._canOpenInputsPopover()) { + this.openInputsPopover(); + } + } + + /** + * Checks if the inputs popover is open + * @private + * @method + * @name sap.ui.webc.main.TimePickerBase#isInputsPopoverOpen + * @returns {boolean} + */ + isInputsPopoverOpen() { + return !!this._isInputsPopoverOpen; + } + + submitInputsPopover() { + this._updateValueAndFireEvents(this.tempValue!, true, ["change", "value-changed"]); + this.closeInputsPopover(); + } + + async onInputsPopoverAfterOpen() { + const popover = await this._getInputsPopover(); + popover.querySelector("[ui5-time-selection-inputs]")!._addNumericAttributes(); + } + + onInputsPopoverAfterClose() { + this._isInputsPopoverOpen = false; + } + + async _handleInputClick(evt: MouseEvent) { + const target = evt.target as HTMLElement; if (this._isPickerOpen) { return; } + if (this._isPhone && target && !target.hasAttribute("ui5-icon")) { + this.toggleInputsPopover(); + } + const inputField = await this._getInputField(); if (inputField) { @@ -261,10 +391,10 @@ class TimePickerBase extends UI5Element { } const valid = this.isValid(value); + if (value !== undefined && valid && normalizeValue) { // if value === undefined, valid is guaranteed to be falsy value = this.normalizeValue(value); // transform valid values (in any format) to the correct format } - if (!eventsNames.includes("input")) { this.value = ""; // Do not remove! DurationPicker (an external component extending TimePickerBase) use case -> value is 05:10, user tries 05:12, after normalization value is changed back to 05:10 so no invalidation happens, but the input still shows 05:12. Thus we enforce invalidation with the "" this.value = value; @@ -295,61 +425,24 @@ class TimePickerBase extends UI5Element { this._updateValueAndFireEvents(target.value, false, ["input"]); } - /** - * Closes the picker - * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#closePicker - */ - async closePicker() { - const responsivePopover = await this._getPopover(); - responsivePopover.close(); - this._isPickerOpen = false; - } - - /** - * Opens the picker. - * @async - * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#openPicker - * @returns {Promise} Resolves when the picker is open - */ - async openPicker() { - this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); - const responsivePopover = await this._getPopover(); - responsivePopover.showAt(this); - this._isPickerOpen = true; - } - - togglePicker() { - if (this.isOpen()) { - this.closePicker(); - } else if (this._canOpenPicker()) { - this.openPicker(); - } - } - - /** - * Checks if the picker is open - * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#isOpen - * @returns {boolean} - */ - isOpen() { - return !!this._isPickerOpen; - } - _canOpenPicker() { return !this.disabled && !this.readonly; } + _canOpenInputsPopover() { + return !this.disabled && this._isPhone; + } + async _getPopover() { const staticAreaItem = await this.getStaticAreaItemDomRef(); return staticAreaItem!.querySelector("[ui5-responsive-popover]")!; } + async _getInputsPopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + return staticAreaItem!.querySelector("[ui5-popover]")!; + } + _getInput(): Input { return this.shadowRoot!.querySelector("[ui5-input]")!; } @@ -360,20 +453,22 @@ class TimePickerBase extends UI5Element { } _onkeydown(e: KeyboardEvent) { + if (this._isPhone && !this.isInputsPopoverOpen()) { + e.preventDefault(); + } if (isShow(e)) { e.preventDefault(); this.togglePicker(); } const target = e.target as Node; + if ((this._getInput().isEqualNode(target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) { this.closePicker(); } - if (this.isOpen()) { return; } - if (isPageUpShiftCtrl(e)) { e.preventDefault(); this._modifyValueBy(1, "second"); @@ -401,6 +496,7 @@ class TimePickerBase extends UI5Element { getFormat() { let dateFormat; + if (this._isPattern) { dateFormat = DateFormat.getDateInstance({ pattern: this._formatPattern, @@ -442,7 +538,6 @@ class TimePickerBase extends UI5Element { if (value === "") { return true; } - return !!this.getFormat().parse(value as string); } @@ -450,7 +545,6 @@ class TimePickerBase extends UI5Element { if (value === "") { return value; } - return this.getFormat().format(this.getFormat().parse(value)); } @@ -459,7 +553,6 @@ class TimePickerBase extends UI5Element { if (!date) { return; } - if (unit === "hour") { date.setHours(date.getHours() + amount); } else if (unit === "minute") { @@ -469,6 +562,7 @@ class TimePickerBase extends UI5Element { } const newValue = this.formatValue(date); + this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]); } @@ -483,6 +577,31 @@ class TimePickerBase extends UI5Element { e.preventDefault(); } + /** + * Hides mobile device keyboard by temporary setting the input to readonly state. + */ + _hideMobileKeyboard() { + this._getInput().readonly = true; + setTimeout(() => { this._getInput().readonly = false; }, 0); + } + + async _onfocusin(evt: FocusEvent) { + if (this._isPhone) { + this._hideMobileKeyboard(); + if (this._isInputsPopoverOpen) { + const popover = await this._getInputsPopover(); + popover.applyFocus(); + } + evt.preventDefault(); + } + } + + _oninput(evt: CustomEvent) { + if (this._isPhone) { + evt.preventDefault(); + } + } + get submitButtonLabel() { return TimePickerBase.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON); } diff --git a/packages/main/src/TimePickerClock.ts b/packages/main/src/TimePickerClock.ts index 2e539b394c06..9804484e1090 100644 --- a/packages/main/src/TimePickerClock.ts +++ b/packages/main/src/TimePickerClock.ts @@ -51,7 +51,6 @@ type TimePickerClockSelectedItem = TimePickerClockItem & TimePickerClockSelectio const ANIMATION_DURATION_MAX = 200; // total animation duration, without the delay before firing the event const ANIMATION_DELAY_EVENT = 100; // delay before firing the event -const LONG_TOUCH_DURATION = 1000; // duration for long-touch interaction const CLOCK_ANGLE_STEP = 6; const CLOCK_NUMBER_CLASS = "ui5-tp-clock-number"; const CLOCK_NUMBER_HOVER_CLASS = "ui5-tp-clock-number-hover"; @@ -188,7 +187,6 @@ class TimePickerClock extends UI5Element { * If provided, this will replace the last item displayed. If there is only one (outer) circle, * the last item from outer circle will be replaced; if there is an inner circle too, the last * item of inner circle will be replaced. Usually, the last item '24' is replaced with '0'. - * Do not replace the last item if support2400 is set to true. * * @name sap.ui.webc.main.TimePickerClock.prototype.lastItemReplacement * @type {integer} @@ -243,30 +241,6 @@ class TimePickerClock extends UI5Element { @property({ validator: Integer, defaultValue: 1 }) valueStep!: number; - /** - * Allows to set a value of 24:00, used to indicate the end of the day. - * Works only with HH or H formats. Don't use it together with am/pm. - * - * When this property is set to true, the clock can display either 24 or 00 as last hour. - * The change between 24 and 00 (and vice versa) can be done as follows: - * - * - on a desktop device: hold down the Ctrl key (this changes 24 to 00 and vice versa), and either - * click with mouse on the 00/24 number, or navigate to this value using Arrow keys/PageUp/PageDown and press - * Space key (Space key selects the highlighted value and switch to the next available clock). - * - * - on mobile/touch device: make a long touch on 24/00 value - this action toggles the value to the opposite one. - * - * - on both device types, if there is a keyboard attached: 24 or 00 can be typed directly. - * - * Note: Don't use it together with am/pm. - * - * @name sap.ui.webc.main.TimePickerClock.prototype.support2400 - * @type {boolean} - * @defaultvalue false - */ - @property({ type: Boolean }) - support2400!: boolean; - /** * Defines the currently available Time Picker Clock items depending on Clock setup. * @@ -309,15 +283,6 @@ class TimePickerClock extends UI5Element { @property({ type: Boolean, noAttribute: true }) _cancelTouchOut!: boolean; - /** - * Visibility of '24' on Hours clock flag. - * - * @type {boolean} - * @defaultvalue false - */ - @property({ type: Boolean, noAttribute: true }) - _is24HoursVisible!: boolean; - /** * Calculated selected value of the clock during interactions. * @@ -363,15 +328,6 @@ class TimePickerClock extends UI5Element { @property({ type: Boolean, noAttribute: true }) _animationInProgress!: boolean; - /** - * Stores the ID of the long touch timeout. - * - * @type {integer} - * @defaultvalue -1 - */ - @property({ validator: Integer, defaultValue: -1, noAttribute: true }) - _longTouchId!: number; - _fnOnMouseOutUp: () => void; constructor() { @@ -416,13 +372,11 @@ class TimePickerClock extends UI5Element { let realValue = value; const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1); - if (!this.support2400) { - if (realValue === 0) { - realValue = maxValue; - } - if (realValue === maxValue && this.lastItemReplacement !== -1) { - realValue = this.lastItemReplacement; - } + if (realValue === 0) { + realValue = maxValue; + } + if (realValue === maxValue && this.lastItemReplacement !== -1) { + realValue = this.lastItemReplacement; } return realValue; @@ -485,7 +439,6 @@ class TimePickerClock extends UI5Element { "innerItem": this.showInnerCircle ? (i + this.itemMax).toString() : undefined, }); } - if (this.lastItemReplacement !== -1) { if (this.showInnerCircle && this.prependZero) { values[values.length - 1].innerItem = this.lastItemReplacement.toString().padStart(2, "0"); @@ -535,29 +488,6 @@ class TimePickerClock extends UI5Element { return this.showInnerCircle ? this.itemMax * 2 : this.itemMax; } - /** - * Returns the visibility of '24' hour value as a last clock item. - * - * @returns {boolean} Visibility of the '24' hour value - */ - _get24HoursVisible() { - return this.support2400 ? this._is24HoursVisible : false; - } - - /** - * Sets the visibility of '24' hour - * - * @param {boolean} isVisible visibility of the '24' hour item. - */ - _set24HoursVisible(isVisible: boolean) { - if (this.support2400) { - this._is24HoursVisible = isVisible; - this.lastItemReplacement = isVisible ? 24 : 0; - } else { - this._is24HoursVisible = false; - } - } - /** * Calculates the outer height of a HTML element. * @@ -570,6 +500,7 @@ class TimePickerClock extends UI5Element { } const style = window.getComputedStyle(element); + return element.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom); } @@ -583,7 +514,9 @@ class TimePickerClock extends UI5Element { if (value === this._getMaxValue() && this.lastItemReplacement !== -1) { value = this.lastItemReplacement; } + const valueString = this.showInnerCircle && value === this.lastItemReplacement && this.prependZero ? value.toString().padStart(2, "0") : value.toString(); + return `#${this._id}-${valueString}`; } @@ -651,7 +584,6 @@ class TimePickerClock extends UI5Element { const isInner = this.showInnerCircle && radius <= this._dimensionParameters.innerMax && radius > this._dimensionParameters.innerMin; const isOuterHover = radius <= this._dimensionParameters.outerMax && radius > this._dimensionParameters.outerMin; const isInnerHover = isInner; - const is24HoursVisible = this._get24HoursVisible(); let finalAngle = Math.round((angle === 0 ? 360 : angle) / angleStep) * angleStep; if (finalAngle === 0) { @@ -664,47 +596,18 @@ class TimePickerClock extends UI5Element { if (isInner) { this._selectedValue += this.itemMax; } - if (this.support2400 && !is24HoursVisible && this._selectedValue === 24) { - this._selectedValue = 0; - } } else { this._selectedValue = -1; } // hover simulation calculations - if (isInnerHover || isOuterHover) { - this._hoveredValue = this.support2400 && !is24HoursVisible && this._selectedValue === 0 ? 24 : this._selectedValue; - } else { - this._hoveredValue = -1; - } + this._hoveredValue = isInnerHover || isOuterHover ? this._selectedValue : -1; if (this._selectedValue === this._getMaxValue() && this.lastItemReplacement !== -1) { this._selectedValue = this.lastItemReplacement; } } - /** - * Clears the currently existing long touch period and starts new one if requested. - */ - _resetLongTouch() { - if (this._longTouchId !== -1) { - clearTimeout(this._longTouchId); - } - } - - /** - * Starts new long touch period. - */ - _startLongTouch() { - this._longTouchId = window.setTimeout(() => { - const value = this._selectedValue; - this._longTouchId = -1; - if (value === 0 || value === 24) { - this._toggle2400(); - } - }, LONG_TOUCH_DURATION); - } - /** * Does the animation between the old and the new value of the clock. Can be skipped with setting the second parameter to true. * @@ -756,24 +659,12 @@ class TimePickerClock extends UI5Element { * @param {number} delay delay of the single step */ _selectNextNumber(firstSelected: number, lastSelected: number, direction: number, maxValue: number, newValue: number, delay: number) { - let current; - const is24HoursVisible = this._get24HoursVisible(); + const current = firstSelected > maxValue ? firstSelected - maxValue : firstSelected; if (firstSelected === lastSelected) { this._animationInProgress = false; } - - current = firstSelected > maxValue ? firstSelected - maxValue : firstSelected; - if (this.support2400) { - if (current === 24 && !is24HoursVisible) { - current = 0; - } else if (current === 0 && is24HoursVisible) { - current = 24; - } - } - this._setSelectedValue(current); - if (firstSelected !== lastSelected) { firstSelected += direction; setTimeout(() => { @@ -797,12 +688,12 @@ class TimePickerClock extends UI5Element { * @param {boolean} increase whether to increase or decrease the value */ _modifyValue(increase: boolean) { - let selectedValue: number = this.selectedValue; - let replacementValue: number = this.lastItemReplacement; - let minValue: number = this.itemMin; - let maxValue: number = this.itemMax * (this.showInnerCircle ? 2 : 1); - let step: number = this.valueStep; - let newValue: number; + let selectedValue = this.selectedValue; + const replacementValue = this.lastItemReplacement; + const minValue = this.itemMin; + const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1); + let step = this.valueStep; + let newValue; // fix step in order to change value to the nearest possible if step is > 1 if (selectedValue % step !== 0) { @@ -810,19 +701,13 @@ class TimePickerClock extends UI5Element { step = Math.abs(selectedValue - newValue); } - if (this.support2400 && !this._get24HoursVisible()) { - minValue = 0; - maxValue = 23; - replacementValue = -1; - } - if (selectedValue === replacementValue) { selectedValue = maxValue; } if (increase) { selectedValue += step; if (selectedValue > maxValue) { - selectedValue = this.support2400 ? minValue : selectedValue - maxValue; + selectedValue -= maxValue; } } else { selectedValue -= step; @@ -850,27 +735,6 @@ class TimePickerClock extends UI5Element { this._updateSelectedValueObject(realValue); } - /** - * Toggles 24 and 0 values when a clock has support2400 property set. - * - * @param {boolean} skipSelection Whether to skip the setting of the toggled value - * @returns {this} the clock object for chaining - */ - _toggle2400(skipSelection = false) { - const bIs24HoursVisible: boolean = this._get24HoursVisible(); - const value: number = bIs24HoursVisible ? 0 : 24; - - this._cancelTouchOut = true; - this._set24HoursVisible(!bIs24HoursVisible); - this.lastItemReplacement = value; - if (!skipSelection) { - this._movSelectedValue = value; - this._setSelectedValue(value); - } - - return this; - } - /** * TouchStart/MouseDown event handler. * @@ -878,7 +742,6 @@ class TimePickerClock extends UI5Element { */ _onTouchStart(evt: Event) { this._cancelTouchOut = false; - if (this.disabled || this._mouseOrTouchDown) { return; } @@ -889,11 +752,6 @@ class TimePickerClock extends UI5Element { this._movSelectedValue = this.selectedValue; this._calculateDimensions(); this._calculatePosition(x, y); - - if (this.support2400 && evt.type === "touchstart" && (this._selectedValue === 24 || this._selectedValue === 0)) { - this._resetLongTouch(); - this._startLongTouch(); - } this._mouseOrTouchDown = true; } @@ -914,10 +772,6 @@ class TimePickerClock extends UI5Element { if (!this.disabled && this._selectedValue !== -1 && this._selectedValue !== this._movSelectedValue) { this._setSelectedValue(this._selectedValue); this._movSelectedValue = 0 + this._selectedValue; - if (this.support2400 && evt.type === "touchmove" && (this._selectedValue === 24 || this._selectedValue === 0)) { - this._resetLongTouch(); - this._startLongTouch(); - } } } else if (evt.type === "mousemove") { if (!this._dimensionParameters.radius) { @@ -947,18 +801,11 @@ class TimePickerClock extends UI5Element { if (!this._mouseOrTouchDown) { return; } - this._mouseOrTouchDown = false; evt.preventDefault(); - if (this.disabled || this._selectedValue === -1) { return; } - - if (evt.type === "touchend") { - this._resetLongTouch(); - } - if (!this._cancelTouchOut) { this._changeValueAnimation(this._selectedValue); } @@ -971,8 +818,8 @@ class TimePickerClock extends UI5Element { */ _onMouseWheel(evt: WheelEvent) { const increase = evt.detail ? (evt.detail > 0) : (evt.deltaY > 0 || evt.deltaX > 0); - evt.preventDefault(); + evt.preventDefault(); if (!this._mouseOrTouchDown) { this._modifyValue(increase); } diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts index 23bf58c1bf32..6390627eb0d8 100644 --- a/packages/main/src/TimePickerInternals.ts +++ b/packages/main/src/TimePickerInternals.ts @@ -40,6 +40,31 @@ type TimeSelectionChangeEventDetail = { valid: boolean, } +type TimePickerEntityAttributes = { + min: number, + max: number, + step: number, +} + +type TimePickerEntityProperties = { + label: string, + entity?: string, + itemMin?: number, + itemMax?: number, + value: number, + stringValue?: string, + textValue?: string, + displayStep?: number, + lastItemReplacement?: number, + showInnerCircle?: boolean, + prependZero: boolean, + active?: boolean, + hasSeparator?: boolean, + attributes?: TimePickerEntityAttributes, +} + +const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown + /** * @class * @@ -90,7 +115,7 @@ class TimePickerInternals extends UI5Element { * HH:mm:ss -> 11:42:35 * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) - * + * @type {string} * @name sap.ui.webc.main.TimePickerInternals.prototype.formatPattern * @defaultvalue "" @@ -99,26 +124,9 @@ class TimePickerInternals extends UI5Element { @property() formatPattern!: string; - /** - * Determines the minutes step. The minutes clock is populated only by multiples of the step. - * @type {integer} - * @name sap.ui.webc.main.TimePickerInternals.prototype.secondsStep - * @public - */ - @property({ validator: Integer, defaultValue: 1 }) - minutesStep!: number; - - /** - * Determines the seconds step. The seconds clock is populated only by multiples of the step. - * @type {integer} - * @name sap.ui.webc.main.TimePickerInternals.prototype.secondsStep - * @public - */ - @property({ validator: Integer, defaultValue: 1 }) - secondsStep!: number; - /** * The index of the active Clock/TogleSpinButton. + * * @type {integer} * @defaultvalue 0 * @private @@ -135,6 +143,14 @@ class TimePickerInternals extends UI5Element { @property({ type: CalendarType }) _calendarType!: CalendarType; + /** + * Contains currently available Time Picker components depending on time format. + * + * @type {Array} + */ + @property({ type: Object, multiple: true }) + _entities!: Array; + /** * Contains component-to-index map. * @@ -154,31 +170,28 @@ class TimePickerInternals extends UI5Element { _periods!: Array; /** - * Contains list of separators between the buttons. + * Id of the cooldown interval * - * @type {Array} - * @private + * @type {ReturnType} */ - @property({ multiple: true }) - _separators!: Array; + @property({ validator: Integer, noAttribute: true }) + _typeCooldownId?: ReturnType; /** - * Contains separator before AM/PM (if there is any). + * Exact match number buffer * - * @type {string} - * @private + * @type {integer} */ - @property({ defaultValue: "", noAttribute: true }) - _amPmSeparator!: string; + @property({ validator: Integer, noAttribute: true }) + _exactMatch?: number; /** - * Contains separator after all buttons (if there is any). + * Buffer for entered by keyboard numbers * * @type {string} - * @private */ @property({ defaultValue: "", noAttribute: true }) - _lastSeparator!: string; + _keyboardBuffer!: string; static i18nBundle: I18nBundle; @@ -240,14 +253,6 @@ class TimePickerInternals extends UI5Element { return dayPeriodsAbbrev.map((x: string) => x.toUpperCase()); } - get _showAmPmButton(): boolean { - return true; - } - - get _pmPressed(): boolean { - return false; - } - get _hours() { let hours; const dateValue = this.validDateValue; @@ -275,12 +280,12 @@ class TimePickerInternals extends UI5Element { } get _period() { + let period; + const dateValue = this.validDateValue; + if (!this._hoursConfiguration.isTwelveHoursFormat) { return undefined; } - - let period; - const dateValue = this.validDateValue; if (this._hoursConfiguration.minHour === 1) { period = dateValue.getHours() >= this._hoursConfiguration.maxHour ? this.periodsArray[1] : this.periodsArray[0]; } else { @@ -293,8 +298,8 @@ class TimePickerInternals extends UI5Element { const pattern = this.formatPattern; const hasHours = !!pattern.match(/H/i); const fallback = !pattern || !hasHours; - const localeData = getCachedLocaleDataInstance(getLocale()); + return fallback ? localeData.getCombinedDateTimePattern("medium", "medium", undefined) : pattern; } @@ -318,13 +323,9 @@ class TimePickerInternals extends UI5Element { return TimePickerInternals.i18nBundle.getText(TIMEPICKER_CLOCK_DIAL_LABEL); } - get _nextSeparator() { - const sep = this._separators.shift() || ""; - return sep; - } - setValue(date: Date) { const value = this.formatValue(date); + if (this.isValid(value)) { this.value = this.normalizeValue(value); this.fireEvent("change", { value: this.value, valid: true }); @@ -339,7 +340,6 @@ class TimePickerInternals extends UI5Element { if (value === "") { return value; } - return this.getFormat().format(this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean)); } @@ -356,7 +356,6 @@ class TimePickerInternals extends UI5Element { style: this._formatPattern, }); } - return dateFormat; } @@ -366,54 +365,94 @@ class TimePickerInternals extends UI5Element { _componentKey(name: string) { type ComponentKey = keyof typeof this._componentMap; - const key = name as ComponentKey; - return key; + return name as ComponentKey; } - _getSeparators() { - // @ts-ignore aFormatArray is a private API of DateFormat - const formatArray = this.getFormat().aFormatArray; - let previousWasEntity = false; - let index; + _indexFromName(name: string) { + return this._componentMap[this._componentKey(name)]; + } - this._separators = []; + /** + * Returns name of the clock or button from the id of the event target. + * + * @returns {string | undefined} name of the clock/button + */ + _getNameFromId(id: string) { + const parts = id.split("_"); - if (!formatArray.length) { - return; - } + return parts.length ? parts[parts.length - 1] : undefined; + } - if (formatArray[0].type !== "text") { - this._separators.push(""); - } + /** + * Returns index of the clock or button from the id of the event target. + * + * @returns {number} index of the clock/button + */ + _getIndexFromId(id: string) { + const name = this._getNameFromId(id); - for (index = 0; index < formatArray.length; index++) { - if (formatArray[index].type !== "text") { - if (previousWasEntity) { - // there was previous non-separator entity, and this one is the same too, so add empty separator - this._separators.push(""); - } else { - // this is non-separator entity, set the entity flag - previousWasEntity = true; - } - } else { - // add separator and clear non-separator entity flag - this._separators.push(formatArray[index].value as string); - previousWasEntity = false; - } - } + return name ? this._indexFromName(name) : 0; + } - // push one more empty separator for the last entity - if (formatArray[index - 1].type !== "text") { - this._separators.push(""); + /** + * Changes hours value. + * + * @param {hours} number new hours value + */ + _hoursChange(hours: number) { + if (this._hoursConfiguration.isTwelveHoursFormat) { + hours = this._shiftHours(hours); } + + const date = this.validDateValue; + + date.setHours(hours); + this.setValue(date); + } + + /** + * Changes minutes value. + * + * @param {minutes} number new minutes value + */ + _minutesChange(minutes: number) { + const date = this.validDateValue; + + date.setMinutes(minutes); + this.setValue(date); + } + + /** + * Changes seconds value. + * + * @param {seconds} number new seconds value + */ + _secondsChange(seconds: number) { + const date = this.validDateValue; + + date.setSeconds(seconds); + this.setValue(date); } _buttonAmPm() { return this._hasPeriodsComponent ? this.shadowRoot?.querySelector(`#${this._id}_AmPm`) : undefined; } + _createPeriodComponent() { + if (this._hasPeriodsComponent) { + // add period item + this.periodsArray.forEach(item => { + this._periods.push({ + "label": item, + "pressed": this._period === item, + }); + }); + } + } + _periodChange(evt: PointerEvent) { const periodItem = evt.target; + if (periodItem) { const period = (periodItem as HTMLElement).textContent; this._calculatePeriodChange(period as string); @@ -422,6 +461,7 @@ class TimePickerInternals extends UI5Element { _calculatePeriodChange(period: string) { const date = this.validDateValue; + if (period === this._periods[0].label && date.getHours() >= 12) { date.setHours(date.getHours() - 12); } if (period === this._periods[1].label && date.getHours() < 12) { @@ -429,6 +469,60 @@ class TimePickerInternals extends UI5Element { } this.setValue(date); } + + /** + * Shifts hours value with +/- 12 depending on hour value and day period. + * + * @param {number} hours current hours + * @returns {number} shifted hours + */ + _shiftHours(hours: number) { + if (this._period === this.periodsArray[0]) { // AM + hours = hours === 12 ? 0 : hours; + } else if (this._period === this.periodsArray[1]) { // PM + hours = hours === 12 ? hours : hours + 12; + } + return hours; + } + + /** + * Clears the currently existing cooldown period and starts new one if requested. + * + * @param {boolean} startNewCooldown whether to start new cooldown period after clearing previous one + */ + _resetCooldown(startNewCooldown: boolean) { + if (!TYPE_COOLDOWN_DELAY) { + return; // if delay is 0, cooldown is disabled + } + if (this._typeCooldownId) { + clearTimeout(this._typeCooldownId); + } + if (startNewCooldown) { + this._startCooldown(); + } + } + + /** + * Starts new cooldown period. + */ + _startCooldown() { + if (!TYPE_COOLDOWN_DELAY) { + return; // if delay is 0, cooldown is disabled + } + this._typeCooldownId = setTimeout(() => { + this._keyboardBuffer = ""; + this._typeCooldownId = undefined; + if (this._exactMatch) { + this._setExactMatch(); + this._exactMatch = undefined; + } + }, TYPE_COOLDOWN_DELAY); + } + + /** + * Sets the exact match value. Override if necessary. + */ + _setExactMatch() {} } TimePickerInternals.define(); diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs index 03c3e8e1f808..2407c09ddeeb 100644 --- a/packages/main/src/TimePickerPopover.hbs +++ b/packages/main/src/TimePickerPopover.hbs @@ -6,6 +6,7 @@ allow-target-overlap _hide-header hide-arrow + @ui5-after-open="{{onResponsivePopoverAfterOpen}}" @ui5-after-close="{{onResponsivePopoverAfterClose}}" @wheel="{{_handleWheel}}" @keydown="{{_onkeydown}}" @@ -15,8 +16,6 @@ id="{{_id}}-time-sel" value="{{_timeSelectionValue}}" format-pattern="{{_formatPattern}}" - .minutesStep="{{minutesStep}}" - .secondsStep="{{secondsStep}}" @ui5-change="{{onTimeSelectionChange}}" @close-picker="{{submitPickers}}" > @@ -26,3 +25,34 @@ {{cancelButtonLabel}}
      + +{{#if _isPhone}} + +
      + +
      + +
      + {{submitButtonLabel}} + {{cancelButtonLabel}} +
      +       +{{/if}} \ No newline at end of file diff --git a/packages/main/src/TimeSelectionClocks.hbs b/packages/main/src/TimeSelectionClocks.hbs index 8e6942a853ef..f17145e08273 100644 --- a/packages/main/src/TimeSelectionClocks.hbs +++ b/packages/main/src/TimeSelectionClocks.hbs @@ -10,22 +10,24 @@
      - {{#each _buttons}} - {{this.separator}} + {{#each _entities}} + {{#if this.hasSeparator}} + : + {{/if}} {{this.valueString}} + >{{this.stringValue}} {{/each}} {{#if _periods.length}} - {{_amPmSeparator}} + {{/if}} - {{_lastSeparator}}
      - {{#each _clocks}} + {{#each _entities}} diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts index 7d730a9afbf0..94ca963443df 100644 --- a/packages/main/src/TimeSelectionClocks.ts +++ b/packages/main/src/TimeSelectionClocks.ts @@ -1,9 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; - import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling -import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { isDown, isUp, @@ -26,8 +24,6 @@ import TimePickerInternals from "./TimePickerInternals.js"; import TimePickerClock from "./TimePickerClock.js"; import ToggleSpinButton from "./ToggleSpinButton.js"; import SegmentedButton from "./SegmentedButton.js"; -import SegmentedButtonItem from "./SegmentedButtonItem.js"; - import type { TimePickerClockChangeEventDetail } from "./TimePickerClock.js"; // Template @@ -36,37 +32,6 @@ import TimeSelectionClocksTemplate from "./generated/templates/TimeSelectionCloc // Styles import TimeSelectionClocksCss from "./generated/themes/TimeSelectionClocks.css.js"; -type TimePickerClockProperties = { - id: string, - label: string, - clock: string, - itemMin: number, - itemMax: number, - selectedValue: number, - displayStep: number, - valueStep: number, - lastItemReplacement: number, - showInnerCircle: boolean, - prependZero: boolean, - min: number, - max: number, - active: boolean, -} - -type ToggleSpinButtonProperties = { - id: string, - valueMin: number, - valueMax: number, - valueNow: number, - valueString: string, - valueText: string, - accessibleName: string, - pressed: boolean, - separator: string, -} - -const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown - /** * @class * @@ -98,57 +63,16 @@ const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown TimePickerClock, ToggleSpinButton, SegmentedButton, - SegmentedButtonItem, ], }) class TimeSelectionClocks extends TimePickerInternals { - /** - * Contains currently available Time Picker Clock components depending on time format. - * - * @type {Array} - */ - @property({ type: Object, multiple: true }) - _clocks!: Array; - - /** - * Contains currently available Button components depending on time format. - * - * @type {Array} - */ - @property({ type: Object, multiple: true }) - _buttons!: Array; - /** * Flag for pressed Space key */ @property({ type: Boolean, noAttribute: true }) _spacePressed!: boolean; - /** - * Buffer for entered by keyboard numbers - * - * @type {string} - */ - @property({ defaultValue: "", noAttribute: true }) - _kbdBuffer!: string; - - /** - * Id of the cooldown interval - * - * @type {ReturnType} - */ - @property({ validator: Integer, noAttribute: true }) - _typeCooldownId?: ReturnType; - - /** - * Exact match number buffer - * - * @type {integer} - */ - @property({ validator: Integer, noAttribute: true }) - _exactMatch?: number; - onBeforeRendering() { this._createComponents(); } @@ -160,12 +84,9 @@ class TimeSelectionClocks extends TimePickerInternals { * @returns { ToggleSpinButton | undefined} component (if exists) or undefined */ _buttonComponent(indexOrName: number | string) { - if (typeof indexOrName === "string") { - const key = this._componentKey(indexOrName); - const index = this._componentMap[key]; - return index !== undefined ? this.shadowRoot?.querySelector(`#${this._buttons[index].id}`) : undefined; - } - return this.shadowRoot?.querySelector(`#${this._buttons[indexOrName].id}`); + const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; + const entity = this._entities[index].entity; + return entity ? this.shadowRoot?.querySelector(`#${this._id}_button_${entity}`) : undefined; } /** @@ -175,36 +96,9 @@ class TimeSelectionClocks extends TimePickerInternals { * @returns { TimePickerClock | undefined} component (if exists) or undefined */ _clockComponent(indexOrName: number | string) { - if (typeof indexOrName === "string") { - const key = this._componentKey(indexOrName); - const index = this._componentMap[key]; - return index !== undefined ? this.shadowRoot?.querySelector(`#${this._clocks[index].id}`) : undefined; - } - return this.shadowRoot?.querySelector(`#${this._clocks[indexOrName].id}`); - } - - /** - * Returns name of the clock or button from the id of the event target. - * - * @returns {string | undefined} name of the clock/button - */ - _getNameFromId(id: string) { - const parts = id.split("_"); - return parts.length > 0 ? parts[parts.length - 1] : undefined; - } - - /** - * Returns index of the clock or button from the id of the event target. - * - * @returns {number} index of the clock/button - */ - _getIndexFromId(id: string) { - const name = this._getNameFromId(id); - if (name) { - const key = this._componentKey(name); - return this._componentMap[key]; - } - return 0; + const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; + const entity = this._entities[index].entity; + return entity ? this.shadowRoot?.querySelector(`#${this._id}_clock_${entity}`) : undefined; } /** @@ -227,7 +121,9 @@ class TimeSelectionClocks extends TimePickerInternals { _buttonFocusIn(evt: Event) { const target = evt.target as HTMLElement; const name = this._getNameFromId(target.id); - name && this._switchTo(name); + if (name) { + this._switchTo(name); + } } /** @@ -256,7 +152,7 @@ class TimeSelectionClocks extends TimePickerInternals { } else if (isSpace(evt) && toggleSpinButtonTarget && !this._spacePressed) { evt.preventDefault(); this._spacePressed = true; - this._kbdBuffer = ""; + this._keyboardBuffer = ""; this._resetCooldown(true); this._switchNextClock(true); } else if ((isUp(evt) || isDown(evt)) && !isUpAlt(evt) && !isDownAlt(evt)) { @@ -300,11 +196,11 @@ class TimeSelectionClocks extends TimePickerInternals { evt.preventDefault(); } else if (isColon(evt)) { // Colon (:) - Switch to next clock - this._kbdBuffer = ""; + this._keyboardBuffer = ""; this._exactMatch = undefined; this._resetCooldown(true); this._switchNextClock(true); - } else if (isNumber(evt) && this._clocks[this._activeIndex]) { + } else if (isNumber(evt) && this._entities[this._activeIndex]) { // Direct number entry this._exactMatch = undefined; this._resetCooldown(true); @@ -319,110 +215,55 @@ class TimeSelectionClocks extends TimePickerInternals { */ _numbersInput(evt: KeyboardEvent) { const char = evt.key; - const bufferStr = this._kbdBuffer + char; + const bufferStr = this._keyboardBuffer + char; const bufferNum = parseInt(bufferStr); - let indexStr = ""; - let indexNum = 0; - let matching = 0; - let valueMatching = -1; + const entity = this._entities[this._activeIndex]; let activeClock = this._clockComponent(this._activeIndex); - if (this._clocks[this._activeIndex].valueStep === 1) { - // when the step=1, there is "direct" approach - while typing, the exact value is selected - if (bufferNum > this._clocks[this._activeIndex].max) { - // value accumulated in the buffer (old entry + new entry) is greater than the clock maximum value, - // so assign old entry to the current clock and then switch to the next clock, and add new entry as an old value - activeClock && activeClock._setSelectedValue(parseInt(this._kbdBuffer)); - this._switchNextClock(); - this._kbdBuffer = char; - activeClock = this._clockComponent(this._activeIndex); - activeClock && activeClock._setSelectedValue(parseInt(char)); - this._resetCooldown(true); - } else { - // value is less than clock's max value, so add new entry to the buffer - this._kbdBuffer = bufferStr; - activeClock && activeClock._setSelectedValue(parseInt(this._kbdBuffer)); - if (this._kbdBuffer.length === 2 || parseInt(`${this._kbdBuffer}0`) > this._clocks[this._activeIndex].max) { - // if buffer length is 2, or buffer value + one more (any) number is greater than clock's max value - // there is no place for more entry - just set buffer as a value, and switch to the next clock - this._resetCooldown(this._kbdBuffer.length !== 2); - this._kbdBuffer = ""; - this._switchNextClock(); - } - } + if (!entity || !entity.attributes) { + return; + } + if (bufferNum > entity.attributes.max) { + // value accumulated in the buffer (old entry + new entry) is greater than the clock maximum value, + // so assign old entry to the current clock and then switch to the next clock, and add new entry as an old value + activeClock && activeClock._setSelectedValue(parseInt(this._keyboardBuffer)); + this._switchNextClock(); + this._keyboardBuffer = char; + activeClock = this._clockComponent(this._activeIndex); + activeClock && activeClock._setSelectedValue(parseInt(char)); + this._resetCooldown(true); } else { - // when the step is > 1, while typing, the exact match is searched, otherwise the first value that starts with entered value, is being selected - // find matches - for (indexNum = this._clocks[this._activeIndex].min; indexNum <= this._clocks[this._activeIndex].max; indexNum++) { - if (indexNum % this._clocks[this._activeIndex].valueStep === 0) { - indexStr = indexNum.toString(); - if (bufferStr === indexStr.substr(0, bufferStr.length) || bufferNum === indexNum) { - matching++; - valueMatching = matching === 1 ? indexNum : -1; - if (bufferNum === indexNum) { - this._exactMatch = indexNum; - } - } - } - } - if (matching === 1) { - // only one item is matching - activeClock && activeClock._setSelectedValue(valueMatching); - this._exactMatch = undefined; - this._kbdBuffer = ""; - this._resetCooldown(true); + // value is less than clock's max value, so add new entry to the buffer + this._keyboardBuffer = bufferStr; + activeClock && activeClock._setSelectedValue(parseInt(this._keyboardBuffer)); + if (this._keyboardBuffer.length === 2 || parseInt(`${this._keyboardBuffer}0`) > entity.attributes.max) { + // if buffer length is 2, or buffer value + one more (any) number is greater than clock's max value + // there is no place for more entry - just set buffer as a value, and switch to the next clock + this._resetCooldown(this._keyboardBuffer.length !== 2); + this._keyboardBuffer = ""; this._switchNextClock(); - } else if (bufferStr.length === 2) { - // no matches, but 2 numbers are entered, start again - this._exactMatch = undefined; - this._kbdBuffer = ""; - this._resetCooldown(true); - } else { - // no match, add last number to buffer - this._kbdBuffer = bufferStr; } } } /** - * Clears the currently existing cooldown period and starts new one if requested. - * - * @param {boolean} startNewCooldown whether to start new cooldown period after clearing previous one + * Focuses the first available button. */ - _resetCooldown(startNewCooldown: boolean) { - if (!TYPE_COOLDOWN_DELAY) { - return; // if delay is 0, cooldown is disabled - } - - if (this._typeCooldownId) { - clearTimeout(this._typeCooldownId); - } - if (startNewCooldown) { - this._startCooldown(); - } + _focusFirstButton() { + this._activeIndex = 0; + this._buttonComponent(0)!.focus(); } /** - * Starts new cooldown period. + * Sets the exact match value. Must be overriden. */ - _startCooldown() { - if (!TYPE_COOLDOWN_DELAY) { - return; // if delay is 0, cooldown is disabled - } - - this._typeCooldownId = setTimeout(() => { - this._kbdBuffer = ""; - this._typeCooldownId = undefined; - if (this._exactMatch) { - const clock = this._clockComponent(this._activeIndex); - clock && clock._setSelectedValue(this._exactMatch); - this._exactMatch = undefined; - } - }, TYPE_COOLDOWN_DELAY); + _setExactMatch() { + const clock = this._clockComponent(this._activeIndex); + clock && this._exactMatch !== undefined && clock._setSelectedValue(this._exactMatch); } /** - * Createss clock and button components according to the display format pattern. + * Creates clock and button components according to the display format pattern. */ _createComponents() { const time = { @@ -431,128 +272,87 @@ class TimeSelectionClocks extends TimePickerInternals { seconds: parseInt(this._seconds), }; - this._getSeparators(); - - this._clocks = []; - this._buttons = []; + this._entities = []; this._periods = []; - + this._componentMap = { + hours: -1, + minutes: -1, + seconds: -1, + }; if (this._hasHoursComponent) { // add Hours clock - this._componentMap.hours = this._clocks.length; - this._clocks.push({ - "id": `${this._id}_clock_hours`, + this._componentMap.hours = this._entities.length; + this._entities.push({ "label": this.hoursLabel, - "clock": "hours", + "entity": "hours", "itemMin": 1, "itemMax": 12, - "selectedValue": time.hours, + "value": time.hours, + "stringValue": this._hours, + "textValue": `${time.hours} ${this.hoursLabel}`, "displayStep": 1, - "valueStep": 1, "lastItemReplacement": this._hoursConfiguration.isTwelveHoursFormat ? -1 : 0, "showInnerCircle": !this._hoursConfiguration.isTwelveHoursFormat, "prependZero": this._zeroPaddedHours, - "min": this._hoursConfiguration.minHour, - "max": this._hoursConfiguration.maxHour, + "hasSeparator": this._entities.length > 0, "active": false, - }); - // add Hours button - this._buttons.push({ - "id": `${this._id}_button_hours`, - "valueMin": this._hoursConfiguration.minHour, - "valueMax": this._hoursConfiguration.maxHour, - "valueNow": time.hours, - "valueString": this._hours, - "valueText": `${time.hours} ${this.hoursLabel}`, - "accessibleName": this.hoursLabel, - "pressed": false, - "separator": this._nextSeparator, + "attributes": { + "min": this._hoursConfiguration.minHour, + "max": this._hoursConfiguration.maxHour, + "step": 1, + }, }); } - if (this._hasMinutesComponent) { // add Minutes clock - this._componentMap.minutes = this._clocks.length; - this._clocks.push({ - "id": `${this._id}_clock_minutes`, + this._componentMap.minutes = this._entities.length; + this._entities.push({ "label": this.minutesLabel, - "clock": "minutes", + "entity": "minutes", "itemMin": 1, "itemMax": 60, - "selectedValue": time.minutes, + "value": time.minutes, + "stringValue": this._minutes, + "textValue": `${time.minutes} ${this.minutesLabel}`, // possible concatenation "displayStep": 5, - "valueStep": this.minutesStep, "lastItemReplacement": 0, "showInnerCircle": false, "prependZero": false, - "min": 0, - "max": 59, + "hasSeparator": this._entities.length > 0, "active": false, - }); - - // add Minutes button - this._buttons.push({ - "id": `${this._id}_button_minutes`, - "valueMin": 0, - "valueMax": 59, - "valueNow": time.minutes, - "valueString": this._minutes, - "valueText": `${time.minutes} ${this.minutesLabel}`, - "accessibleName": this.minutesLabel, - "pressed": false, - "separator": this._nextSeparator, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, }); } - if (this._hasSecondsComponent) { // add Seconds clock - this._componentMap.seconds = this._clocks.length; - this._clocks.push({ - "id": `${this._id}_clock_seconds`, + this._componentMap.seconds = this._entities.length; + this._entities.push({ "label": this.secondsLabel, - "clock": "seconds", + "entity": "seconds", "itemMin": 1, "itemMax": 60, - "selectedValue": time.seconds, + "value": time.seconds, + "stringValue": this._seconds, + "textValue": `${time.seconds} ${this.secondsLabel}`, // possible concatenation "displayStep": 5, - "valueStep": this.secondsStep, "lastItemReplacement": 0, "showInnerCircle": false, "prependZero": false, - "min": 0, - "max": 59, + "hasSeparator": this._entities.length > 0, "active": false, - }); - - // add Seconds button - this._buttons.push({ - "id": `${this._id}_button_seconds`, - "valueMin": 0, - "valueMax": 59, - "valueNow": time.seconds, - "valueString": this._seconds, - "valueText": `${time.seconds} ${this.secondsLabel}`, - "accessibleName": this.secondsLabel, - "pressed": false, - "separator": this._nextSeparator, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, }); } - - if (this._hasPeriodsComponent) { - // add period item - this.periodsArray.forEach(item => { - this._periods.push({ - "label": item, - "pressed": this._period === item, - }); - }); - this._amPmSeparator = this._nextSeparator; - } - - this._lastSeparator = this._nextSeparator; - - this._clocks[this._activeIndex].active = true; - this._buttons[this._activeIndex].pressed = true; + this._entities[this._activeIndex].active = true; + this._createPeriodComponent(); } /** @@ -575,12 +375,10 @@ class TimeSelectionClocks extends TimePickerInternals { _switchClock(clockIndex: number) { const newButton = this._buttonComponent(clockIndex); - if (this._clocks.length > 0 && clockIndex < this._clocks.length && newButton) { - this._clocks[this._activeIndex].active = false; - this._buttons[this._activeIndex].pressed = false; + if (this._entities.length && clockIndex < this._entities.length && newButton) { + this._entities[this._activeIndex].active = false; this._activeIndex = clockIndex; - this._clocks[this._activeIndex].active = true; - this._buttons[this._activeIndex].pressed = true; + this._entities[this._activeIndex].active = true; newButton.focus(); } } @@ -593,19 +391,19 @@ class TimeSelectionClocks extends TimePickerInternals { _switchNextClock(wrapAround = false) { let activeIndex = this._activeIndex; const startActiveIndex = activeIndex; - const clocksCount = this._clocks.length; const activeClock = this._clockComponent(activeIndex); do { activeIndex++; - if (activeIndex >= clocksCount) { - activeIndex = wrapAround ? 0 : clocksCount - 1; + if (activeIndex >= this._entities.length) { + activeIndex = wrapAround ? 0 : this._entities.length - 1; } // false-positive finding of no-unmodified-loop-condition rule // eslint-disable-next-line no-unmodified-loop-condition - } while (activeClock && activeClock.disabled && activeIndex !== startActiveIndex && (wrapAround || activeIndex < clocksCount - 1)); + } while (activeClock && activeClock.disabled && activeIndex !== startActiveIndex && (wrapAround || activeIndex < this._entities.length - 1)); const newClock = this._clockComponent(activeIndex); + if (activeIndex !== startActiveIndex && newClock && !newClock.disabled) { this._switchClock(activeIndex); } @@ -625,88 +423,28 @@ class TimeSelectionClocks extends TimePickerInternals { if (!button) { return; } - - this._buttons[index].valueString = stringValue; - this._buttons[index].valueNow = value; - this._buttons[index].valueText = `${value} ${this._buttons[index].accessibleName}`; - this._buttons = JSON.parse(JSON.stringify(this._buttons)); - + this._entities[index].stringValue = stringValue; + this._entities[index].value = value; + this._entities = JSON.parse(JSON.stringify(this._entities)); switch (index) { case this._componentMap.hours: - this._hoursChange(evt); + this._hoursChange(value); break; case this._componentMap.minutes: - this._minutesChange(evt); + this._minutesChange(value); break; case this._componentMap.seconds: - this._secondsChange(evt); + this._secondsChange(value); break; } - if (evt.detail.finalChange) { - if (this._activeIndex < this._clocks.length - 1) { + if (this._activeIndex < this._entities.length - 1) { this._switchNextClock(); } else { button.focus(); } } } - - /** - * Shifts hours value with +/- 12 depending on hour value and day period. - * - * @param {number} hours current hours - * @returns {number} shifted hours - */ - _shiftHours(hours: number) { - if (this._period === this.periodsArray[0]) { // AM - hours = hours === 12 ? 0 : hours; - } else if (this._period === this.periodsArray[1]) { // PM - hours = hours === 12 ? hours : hours + 12; - } - return hours; - } - - /** - * Hours 'change' event handler. - * - * @param {event} evt Event object - */ - _hoursChange(evt: CustomEvent) { - let hours = evt.detail.value; - - if (this._hoursConfiguration.isTwelveHoursFormat) { - hours = this._shiftHours(hours); - } - - const date = this.validDateValue; - date.setHours(hours); - this.setValue(date); - } - - /** - * Minutes 'change' event handler. - * - * @param {event} evt Event object - */ - _minutesChange(evt: CustomEvent) { - const minutes = evt.detail.value; - const date = this.validDateValue; - date.setMinutes(minutes); - this.setValue(date); - } - - /** - * Seconds 'change' event handler. - * - * @param {event} evt Event object - */ - _secondsChange(evt: CustomEvent) { - const seconds = evt.detail.value; - const date = this.validDateValue; - date.setSeconds(seconds); - this.setValue(date); - } } TimeSelectionClocks.define(); diff --git a/packages/main/src/TimeSelectionInputs.hbs b/packages/main/src/TimeSelectionInputs.hbs new file mode 100644 index 000000000000..52693d720604 --- /dev/null +++ b/packages/main/src/TimeSelectionInputs.hbs @@ -0,0 +1,41 @@ +
      + {{#each _entities}} + {{#if this.hasSeparator}} + : + {{/if}} + + {{/each}} + {{#if _periods.length}} + + + {{#each _periods}} + + {{this.label}} + + {{/each}} + + {{/if}} +
      \ No newline at end of file diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts new file mode 100644 index 000000000000..81d3c73e90fe --- /dev/null +++ b/packages/main/src/TimeSelectionInputs.ts @@ -0,0 +1,352 @@ +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; + +import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import { + isEnter, + isNumber, +} from "@ui5/webcomponents-base/dist/Keys.js"; +import TimePickerInternals from "./TimePickerInternals.js"; +import Input from "./Input.js"; +import SegmentedButton from "./SegmentedButton.js"; + +import InputType from "./types/InputType.js"; + +import { + TIMEPICKER_INPUTS_ENTER_HOURS, + TIMEPICKER_INPUTS_ENTER_MINUTES, + TIMEPICKER_INPUTS_ENTER_SECONDS, +} from "./generated/i18n/i18n-defaults.js"; + +// Template +import TimeSelectionInputsTemplate from "./generated/templates/TimeSelectionInputsTemplate.lit.js"; + +// Styles +import TimeSelectionInputsCss from "./generated/themes/TimeSelectionInputs.css.js"; + +/** + * @class + * + *

      Overview

      + * + * ui5-time-selection-inputs displays a popover with ui5-input components of type="number" and an + * optional a AM/PM ui5-segmented-button according to the display format given to the ui5-time-picker. + * Using of numeric input components enables display of mobile devices' native numeric keyboard, which speeds up entering of the time. + * The popup appears only on mobile devices when there is a tap on the ui5-time-picker input. + * + * This component should not be used separately. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.main.TimeSelectionInputs + * @extends sap.ui.webc.main.TimePickerInternals + * @abstract + * @tagname ui5-time-selection-inputs + * @since 1.18.0 + * @private + */ +@customElement({ + tag: "ui5-time-selection-inputs", + renderer: litRender, + styles: TimeSelectionInputsCss, + template: TimeSelectionInputsTemplate, + dependencies: [ + Input, + SegmentedButton, + ], +}) + +class TimeSelectionInputs extends TimePickerInternals { + @property({ validator: Integer, defaultValue: -1 }) + _editedInput!: number; + + @property() + _editedInputValue!: string; + + get enterHoursLabel() { + return TimePickerInternals.i18nBundle.getText(TIMEPICKER_INPUTS_ENTER_HOURS); + } + + get enterMinutesLabel() { + return TimePickerInternals.i18nBundle.getText(TIMEPICKER_INPUTS_ENTER_MINUTES); + } + + get enterSecondsLabel() { + return TimePickerInternals.i18nBundle.getText(TIMEPICKER_INPUTS_ENTER_SECONDS); + } + + get _numberType() { + return InputType.Number; + } + + get _isHoursInput() { + const key = this._componentKey("hours"); + return this._componentMap[key] === this._activeIndex; + } + + get _is24HoursFormat() { + return this.formatPattern.indexOf("HH") !== -1 || this.formatPattern.indexOf("H") !== -1; + } + + onBeforeRendering() { + this._createComponents(); + } + + _addNumericAttributes() { + this._entities.forEach((item, index) => { + const input = this._inputComponent(index); + if (input) { + const innerInput = this._innerInput(input)!; + innerInput.setAttribute("autocomplete", "off"); + innerInput.setAttribute("pattern", "[0-9]*"); + innerInput.setAttribute("inputmode", "numeric"); + } + }); + } + + /** + * Returns Input component by index or name. + * + * @param {number | string} indexOrName the index or name of the component + * @returns { Input | undefined} component (if exists) or undefined + */ + _inputComponent(indexOrName: number | string) { + const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; + const entity = this._entities[index].entity; + return entity ? this.shadowRoot?.querySelector(`#${this._id}_input_${entity}`) : undefined; + } + + /** + * Returns the inner input element DOM reference. + * + * @param { Input } input the Input component + * @returns { HTMLElement } inner input element + */ + _innerInput(input: Input) { + return input && input.getInputDOMRefSync(); + } + + /** + * Creates clock and button components according to the display format pattern. + */ + _createComponents() { + let value; + + this._entities = []; + this._periods = []; + this._componentMap = { + hours: -1, + minutes: -1, + seconds: -1, + }; + if (this._hasHoursComponent) { + // add Hours input + this._componentMap.hours = this._entities.length; + value = parseInt(this._hours); + this._entities.push({ + "entity": "hours", + "label": this.enterHoursLabel, + "value": value, + "stringValue": this._editedInput === this._entities.length ? this._editedInputValue : this._formatNumberToString(value, this._zeroPaddedHours), + "hasSeparator": this._entities.length > 0, + "prependZero": this._zeroPaddedHours, + "attributes": { + "min": this._hoursConfiguration.minHour, + "max": this._hoursConfiguration.maxHour, + "step": 1, + }, + }); + } + if (this._hasMinutesComponent) { + // add Minutes clock + this._componentMap.minutes = this._entities.length; + value = parseInt(this._minutes); + this._entities.push({ + "entity": "minutes", + "label": this.enterMinutesLabel, + "value": value, + "stringValue": this._editedInput === this._entities.length ? this._editedInputValue : this._formatNumberToString(value, true), + "hasSeparator": this._entities.length > 0, + "prependZero": true, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, + }); + } + if (this._hasSecondsComponent) { + // add Seconds clock + this._componentMap.seconds = this._entities.length; + value = parseInt(this._seconds); + this._entities.push({ + "entity": "seconds", + "label": this.enterSecondsLabel, + "value": value, + "stringValue": this._editedInput === this._entities.length ? this._editedInputValue : this._formatNumberToString(value, true), + "hasSeparator": this._entities.length > 0, + "prependZero": true, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, + }); + } + this._createPeriodComponent(); + } + + /** + * Switches to the specific input. + * + * @param {number} index the index (in _entities array) of the input + * @private + */ + _switchInput(index: number) { + if (index >= this._entities.length) { + index = 0; + } + this._inputComponent(index)!.focus(); + } + + /** + * Switches to the next input that can de focused. + * + * @param {boolean} wrapAround whether to start with first clock after reaching the last one, or not + * @private + */ + _switchNextInput(wrapAround = false) { + let activeInput = this._activeIndex; + const startActiveInput = activeInput; + + if (!this._entities.length) { + return; + } + do { + activeInput++; + if (activeInput >= this._entities.length) { + activeInput = wrapAround ? 0 : this._entities.length - 1; + } + // false-positive finding of no-unmodified-loop-condition rule + // eslint-disable-next-line no-unmodified-loop-condition + } while (this._inputComponent(activeInput)!.disabled && activeInput !== startActiveInput && (wrapAround || activeInput < this._entities.length)); + if (activeInput !== startActiveInput && !this._inputComponent(activeInput)!.disabled) { + this._switchInput(activeInput); + } + } + + /** + * Return a value as string, formatted and prepended with zero if necessary. + * + * @param {number} num A number to format + * @param {boolean} prependZero Whether to prepend with zero or not + * @param {number} max Max value of the number for this clock + * @returns {string} Formatted value + * @private + */ + _formatNumberToString(num: number, prependZero: boolean) { + return num < 10 && prependZero ? `0${num}` : num.toString(); + } + + _onkeydown(evt: KeyboardEvent) { + if (this._activeIndex === -1) { + return; + } + if (isEnter(evt)) { + // Accept the time and close the popover + this.fireEvent("close-inputs"); + } else if (isNumber(evt) && this._entities[this._activeIndex]) { + const char = evt.key; + const buffer = this._keyboardBuffer + char; + const bufferValue = parseInt(buffer); + + evt.preventDefault(); + this._resetCooldown(true); + if (bufferValue > this._entities[this._activeIndex].attributes!.max) { + // value accumulated in the buffer (old entry + new entry) is greater than the input maximum value, + // so assign old entry to the current inut and then switch to the next input, and add new entry as an old value + this._inputChange(parseInt(this._keyboardBuffer)); + this._switchNextInput(); + this._keyboardBuffer = char; + this._inputChange(parseInt(char)); + this._resetCooldown(true); + } else { + // value is less than clock's max value, so add new entry to the buffer + this._keyboardBuffer = buffer; + this._inputChange(parseInt(this._keyboardBuffer)); + if (this._keyboardBuffer.length === 2 || parseInt(`${this._keyboardBuffer}0`) > this._entities[this._activeIndex].attributes!.max) { + // if buffer length is 2, or buffer value + one more (any) number is greater than clock's max value + // there is no place for more entry - just set buffer as a value, and switch to the next clock + this._resetCooldown(this._keyboardBuffer.length !== 2); + this._keyboardBuffer = ""; + this._switchNextInput(); + } + } + } + } + + /** + * Input 'change' event handler. + * + * @param {value} number new value to set on active input + */ + _inputChange(value: number) { + const stringValue = this._formatNumberToString(value, this._entities[this._activeIndex].prependZero); + + if (this._activeIndex === -1) { + return; + } + value = parseInt(stringValue); + this._entities[this._activeIndex].value = value; + this._inputComponent(this._activeIndex)!.value = this._formatNumberToString(value, this._entities[this._activeIndex].prependZero); + switch (this._activeIndex) { + case this._componentMap.hours: + this._hoursChange(value); + break; + case this._componentMap.minutes: + this._minutesChange(value); + break; + case this._componentMap.seconds: + this._secondsChange(value); + break; + } + } + + _onfocusin(e: FocusEvent) { + const input = e.target as Input; + const innerInput = this._innerInput(input); + + this._editedInput = -1; + innerInput!.select(); + this._activeIndex = this._getIndexFromId(input.id); + } + + _onfocusout() { + let value = this._inputComponent(this._activeIndex)!.value === "" ? 0 : this._entities[this._activeIndex].value; + + this._editedInput = -1; + if (this._isHoursInput && !this._is24HoursFormat && value === 0) { + value = 12; + } + this._inputChange(value); + this._activeIndex = -1; + } + + _oninput() { + const stringValue = this._inputComponent(this._activeIndex)!.value; + const value = stringValue === "" ? 0 : parseInt(stringValue); + + if (value !== this._entities[this._activeIndex].value) { + this._editedInput = this._activeIndex; + this._editedInputValue = stringValue; + this._inputChange(value); + this._keyboardBuffer = stringValue; + } + } +} + +TimeSelectionInputs.define(); + +export default TimeSelectionInputs; diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs index c56f0db4b476..b21ca84ab646 100644 --- a/packages/main/src/TokenizerPopover.hbs +++ b/packages/main/src/TokenizerPopover.hbs @@ -36,7 +36,10 @@ @ui5-item-delete={{itemDelete}} > {{#each _tokens}} - + {{this.text}} {{/each}} diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 17eca059464c..59a0833350d0 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -89,11 +89,7 @@ class Toolbar extends UI5Element { /** * Indicated the direction in which the Toolbar items will be aligned. - * Available options are: - *
        - *
      • End
        • - *
      • Start
        • - *
      + * * @type {sap.ui.webc.main.types.ToolbarAlign} * @public * @defaultvalue: "End" @@ -154,6 +150,8 @@ class Toolbar extends UI5Element { /** * Defines the items of the component. + * + * Note: Currently only ui5-toolbar-button, ui5-toolbar-select, ui5-toolbar-separator and ui5-toolbar-spacer are allowed here. * * @type {sap.ui.webc.main.IToolbarItem[]} * @name sap.ui.webc.main.Toolbar.prototype.default diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 25792e5a0aa9..938b8c67f466 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -31,6 +31,7 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; * @extends sap.ui.webc.main.ToolbarItem * @tagname ui5-toolbar-button * @public + * @implements sap.ui.webc.main.IToolbarItem * @since 1.17.0 */ @customElement({ diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index d23f568f8788..1951d6b87e32 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -38,6 +38,7 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail; * @tagname ui5-toolbar-select * @appenddocs sap.ui.webc.main.ToolbarSelectOption * @public + * @implements sap.ui.webc.main.IToolbarItem * @since 1.17.0 */ @customElement({ diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts index c5aca9ac9a27..a19c48f86336 100644 --- a/packages/main/src/ToolbarSeparator.ts +++ b/packages/main/src/ToolbarSeparator.ts @@ -21,6 +21,7 @@ import ToolbarItem from "./ToolbarItem.js"; * @tagname ui5-toolbar-separator * @since 1.17.0 * @abstract + * @implements sap.ui.webc.main.IToolbarItem * @public */ @customElement({ diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts index 89322bea09ee..3b290a6eb1a3 100644 --- a/packages/main/src/ToolbarSpacer.ts +++ b/packages/main/src/ToolbarSpacer.ts @@ -20,6 +20,7 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; * @tagname ui5-toolbar-spacer * @abstract * @since 1.17.0 + * @implements sap.ui.webc.main.IToolbarItem * @public */ @customElement({ diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts index b06903ad28bd..842ebd0b7868 100644 --- a/packages/main/src/Tree.ts +++ b/packages/main/src/Tree.ts @@ -198,18 +198,6 @@ class Tree extends UI5Element { * Defines the mode of the component. Since the tree uses a ui5-list to display its structure, * the tree modes are exactly the same as the list modes, and are all applicable. * - *

      - * Note: - * - *
        - *
      • None
        • - *
      • SingleSelect
        • - *
      • SingleSelectBegin
        • - *
      • SingleSelectEnd
        • - *
      • MultiSelect
        • - *
      • Delete
        • - *
      - * * @public * @type {sap.ui.webc.main.types.ListMode} * @name sap.ui.webc.main.Tree.prototype.mode @@ -288,24 +276,6 @@ class Tree extends UI5Element { @property({ defaultValue: undefined, noAttribute: true }) accessibleRoleDescription?: string; - /** - * Shows the toggle button at the end, rather than at the beginning of the items - * - * @protected - * @since 1.0.0-rc.8 - */ - @property({ type: Boolean }) - _toggleButtonEnd!: boolean; - - /** - * Represents the tree in a very minimal state - icons only with no text and no toggle buttons - * - * @protected - * @since 1.0.0-rc.8 - */ - @property({ type: Boolean }) - _minimal!: boolean; - /** * Defines the items of the component. Tree items may have other tree items as children. *

      @@ -348,7 +318,7 @@ class Tree extends UI5Element { } get _role() { - return this._minimal ? "menubar" : "tree"; + return "tree"; } get _label() { @@ -441,8 +411,6 @@ class Tree extends UI5Element { item.setAttribute("level", level.toString()); - item._toggleButtonEnd = this._toggleButtonEnd; - item._minimal = this._minimal; item._setsize = ariaSetSize; item._posinset = index + 1; }); diff --git a/packages/main/src/TreeItem.ts b/packages/main/src/TreeItem.ts index 2ae26ae4b5c1..ce123ea0729b 100644 --- a/packages/main/src/TreeItem.ts +++ b/packages/main/src/TreeItem.ts @@ -81,7 +81,7 @@ class TreeItem extends TreeItemBase { additionalTextState!: `${ValueState}`; get _showTitle() { - return this.text.length && !this._minimal; + return this.text.length; } } diff --git a/packages/main/src/TreeItemBase.hbs b/packages/main/src/TreeItemBase.hbs index 2cf49ca9f39f..cfaf020a6b6d 100644 --- a/packages/main/src/TreeItemBase.hbs +++ b/packages/main/src/TreeItemBase.hbs @@ -9,7 +9,7 @@ class="ui5-li-tree-toggle-box" style="{{styles.preContent}}" > - {{#if _showToggleButtonBeginning}} + {{#if showToggleButton}} - {{/if}} -{{/inline}} - {{#*inline "listItemPostContent"}} {{#if expanded}}
        maxDate.getYear(); - if (this.secondaryCalendarType) { + if (this.hasSecondaryCalendarType) { tempDateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp, true); textInSecType = tempDateInSecType.firstDate.getYear() === tempDateInSecType.lastDate.getYear() ? `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)}` @@ -181,7 +181,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { selected: isSelected, ariaSelected: isSelected ? "true" : "false", year: oYearFormat.format(tempDate.toLocalJSDate()), - yearInSecType: this.secondaryCalendarType && textInSecType, + yearInSecType: textInSecType, disabled: isDisabled, classes: "ui5-yp-item", }; @@ -194,7 +194,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { year.classes += " ui5-yp-item--disabled"; } - if (this.secondaryCalendarType) { + if (this.hasSecondaryCalendarType) { year.classes += " ui5-yp-item-secondary-type"; } const intervalIndex = Math.floor(i / this._getRowSize()); diff --git a/packages/main/src/features/InputElementsFormSupport.ts b/packages/main/src/features/InputElementsFormSupport.ts index dbce5657e37b..c55aa70c0666 100644 --- a/packages/main/src/features/InputElementsFormSupport.ts +++ b/packages/main/src/features/InputElementsFormSupport.ts @@ -10,7 +10,8 @@ interface IFormElement extends UI5Element { checked?: boolean, } -type NativeInputUpdateCallback = (element: IFormElement, nativeInput: HTMLInputElement) => void; +type NativeFormElement = HTMLInputElement | HTMLTextAreaElement; +type NativeInputUpdateCallback = (element: IFormElement, nativeInput: NativeFormElement) => void; type NativeInputChangeCallback = (e: Event) => void; const findNearestFormElement = (element: IFormElement) => { @@ -33,38 +34,59 @@ class FormSupport { */ static syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) { const needsNativeInput = !!element.name || element.required; - let nativeInput = element.querySelector("input[data-ui5-form-support]") as HTMLInputElement; - if (needsNativeInput && !nativeInput) { - nativeInput = document.createElement("input"); - - nativeInput.style.clip = "rect(0 0 0 0)"; - nativeInput.style.clipPath = "inset(50%)"; - nativeInput.style.height = "1px"; - nativeInput.style.overflow = "hidden"; - nativeInput.style.position = "absolute"; - nativeInput.style.whiteSpace = "nowrap"; - nativeInput.style.width = "1px"; - nativeInput.style.bottom = "0"; - nativeInput.setAttribute("tabindex", "-1"); - nativeInput.required = element.required!; - nativeInput.setAttribute("data-ui5-form-support", ""); - nativeInput.setAttribute("aria-hidden", "true"); - - nativeInput.addEventListener("focusin", () => element.getFocusDomRef()?.focus()); + const nativeInput = element.querySelector("input[data-ui5-form-support]"); - nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms - element.appendChild(nativeInput); - } - if (!needsNativeInput && nativeInput) { + if (needsNativeInput) { + this.syncNativeElement(element, nativeInput, nativeInputUpdateCallback); + } else if (nativeInput) { element.removeChild(nativeInput); } + } - if (needsNativeInput) { - nativeInput.name = element.name!; - (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput); + /** + * Syncs the native textarea element, rendered into the component's light DOM, + * with the component's state. + * @param { IFormElement} element - the component with form support + * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties + */ + static syncNativeHiddenTextArea(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) { + const needsNativeTextArea = !!element.name || element.required; + const nativeTextarea = element.querySelector("textarea[data-ui5-form-support]"); + + if (needsNativeTextArea) { + this.syncNativeElement(element, nativeTextarea, nativeInputUpdateCallback, "textarea"); + } else if (nativeTextarea) { + element.removeChild(nativeTextarea); } } + static syncNativeElement(element: IFormElement, nativeElement: NativeFormElement | null, nativeInputUpdateCallback?: NativeInputUpdateCallback, nativeElementTagName = "input") { + if (!nativeElement) { + nativeElement = document.createElement(nativeElementTagName) as NativeFormElement; + + nativeElement.style.clip = "rect(0 0 0 0)"; + nativeElement.style.clipPath = "inset(50%)"; + nativeElement.style.height = "1px"; + nativeElement.style.overflow = "hidden"; + nativeElement.style.position = "absolute"; + nativeElement.style.whiteSpace = "nowrap"; + nativeElement.style.width = "1px"; + nativeElement.style.bottom = "0"; + nativeElement.setAttribute("tabindex", "-1"); + nativeElement.required = element.required!; + nativeElement.setAttribute("data-ui5-form-support", ""); + nativeElement.setAttribute("aria-hidden", "true"); + + nativeElement.addEventListener("focusin", () => element.getFocusDomRef()?.focus()); + + nativeElement.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms + element.appendChild(nativeElement); + } + + nativeElement.name = element.name!; + (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeElement); + } + /** * Syncs the native file input element, rendered into the ui5-file-uploader component's light DOM, * with the ui5-file-uploader component's state. @@ -74,7 +96,7 @@ class FormSupport { */ static syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback) { const needsNativeInput = !!element.name; - let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`) as HTMLInputElement; + let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`); if (needsNativeInput && !nativeInput) { nativeInput = document.createElement("input"); @@ -102,8 +124,8 @@ class FormSupport { } if (needsNativeInput) { - nativeInput.name = element.name!; - (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput); + nativeInput!.name = element.name!; + (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput!); } } @@ -138,7 +160,7 @@ class FormSupport { } } -const copyDefaultProperties = (element: IFormElement, nativeInput: HTMLInputElement) => { +const copyDefaultProperties = (element: IFormElement, nativeInput: NativeFormElement) => { nativeInput.disabled = element.disabled!; nativeInput.value = element.value as string; // We do not explicitly convert to string to retain the current browser behavior }; @@ -150,6 +172,7 @@ export default FormSupport; export { IFormElement, + NativeFormElement, NativeInputChangeCallback, NativeInputUpdateCallback, }; diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 9eff7f8888a8..847b2429429c 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -19,6 +19,7 @@ import SuggestionListItem from "../SuggestionListItem.js"; import { LIST_ITEM_POSITION, + LIST_ITEM_GROUP_HEADER, } from "../generated/i18n/i18n-defaults.js"; import type ListItemType from "../types/ListItemType.js"; import type ListItemBase from "../ListItemBase.js"; @@ -38,7 +39,7 @@ interface SuggestionComponent extends UI5Element { onItemPreviewed: (item: SuggestionListItem) => void; } -type InputSuggestionText = { +type InputSuggestion = { text: string; description: string; image?: string; @@ -51,9 +52,12 @@ type InputSuggestionText = { } type SuggestionsAccInfo = { + isGroup: boolean, currentPos: number; listSize: number; itemText: string; + description: string; + additionalText: string; } /** @@ -110,7 +114,7 @@ class Suggestions { defaultSlotProperties(hightlightValue: string) { const inputSuggestionItems = this._getComponent().suggestionItems; const highlight = this.highlight && !!hightlightValue; - const suggestions: Array = []; + const suggestions: Array = []; inputSuggestionItems.map((suggestion: SuggestionItem, idx: number) => { const text = highlight ? this.getHighlightedText(suggestion, hightlightValue) : this.getRowText(suggestion); @@ -283,13 +287,17 @@ class Suggestions { onItemSelected(selectedItem: SuggestionListItem | null, keyboardUsed: boolean) { const allItems = this._getItems(); const item = selectedItem || allItems[this.selectedItemIndex]; + const nonGroupItems = this._getNonGroupItems(); this.selectedItemIndex = allItems.indexOf(item); this.accInfo = { - currentPos: this.selectedItemIndex + 1, - listSize: allItems.length, - itemText: this._getRealItems()[this.selectedItemIndex].description, + isGroup: item.groupItem, + currentPos: nonGroupItems.indexOf(item) + 1, + listSize: nonGroupItems.length, + itemText: this._getRealItems()[this.selectedItemIndex].text, + description: this._getRealItems()[this.selectedItemIndex].description, + additionalText: this._getRealItems()[this.selectedItemIndex].additionalText, }; // If the item is "Inactive", prevent selection with SPACE or ENTER @@ -472,6 +480,7 @@ class Suggestions { const items = this._getItems(); const currentItem = items[nextIdx]; const previousItem = items[previousIdx]; + const nonGroupItems = this._getNonGroupItems(); if (!currentItem) { return; @@ -481,9 +490,12 @@ class Suggestions { this._clearValueStateFocus(); this.accInfo = { - currentPos: nextIdx + 1, - listSize: items.length, - itemText: this._getRealItems()[items.indexOf(currentItem)].description, + isGroup: currentItem.groupItem, + currentPos: nonGroupItems.indexOf(currentItem) + 1, + listSize: nonGroupItems.length, + itemText: this._getRealItems()[this.selectedItemIndex].text, + description: this._getRealItems()[items.indexOf(currentItem)].description, + additionalText: this._getRealItems()[items.indexOf(currentItem)].additionalText, }; if (previousItem) { @@ -554,6 +566,10 @@ class Suggestions { return this.responsivePopover ? [...this.responsivePopover.querySelector("[ui5-list]")!.children] as Array : []; } + _getNonGroupItems(): Array { + return this._getItems().filter(item => !item.groupItem); + } + _getComponent(): SuggestionComponent { return this.component; } @@ -588,8 +604,9 @@ class Suggestions { } const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize); + const groupItemText = Suggestions.i18nBundle.getText(LIST_ITEM_GROUP_HEADER); - return `${this.accInfo.itemText} ${itemPositionText}`; + return this.accInfo.isGroup ? `${groupItemText} ${this.accInfo.itemText}` : `${this.accInfo.description} ${this.accInfo.additionalText} ${itemPositionText}`; } getRowText(suggestion: SuggestionItem) { @@ -665,5 +682,5 @@ export default Suggestions; export type { SuggestionComponent, - InputSuggestionText, + InputSuggestion, }; diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index ea8fd25d43b2..08e68ddcee3e 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -154,6 +154,9 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available #XACT: ARIA announcement for the Input suggestion result if no hit INPUT_SUGGESTIONS_NO_HIT=No results +#XACT: ARIA label for the Input clear icon +INPUT_CLEAR_ICON_ACC_NAME=Clear + #XFLD: Subtle link description label LINK_SUBTLE=Subtle @@ -337,6 +340,15 @@ TIMEPICKER_INPUT_DESCRIPTION=Time Input #XACT: Aria information for the Time Picker Clock Dial TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial +#XACT: Time Picker Inputs tooltip/aria-label for Hours input +TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours + +#XACT: Time Picker Inputs tooltip/aria-label for Minutes input +TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes + +#XACT: Time Picker Inputs tooltip/aria-label for Seconds input +TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds + #XACT: Aria information for the Duration Picker DURATION_INPUT_DESCRIPTION=Duration Input diff --git a/packages/main/src/i18n/messagebundle_ar.properties b/packages/main/src/i18n/messagebundle_ar.properties index 07476b8eff58..ca3ac6de96a3 100644 --- a/packages/main/src/i18n/messagebundle_ar.properties +++ b/packages/main/src/i18n/messagebundle_ar.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} النتائج متوفرة INPUT_SUGGESTIONS_NO_HIT=لا توجد نتائج +INPUT_CLEAR_ICON_ACC_NAME=مسح + LINK_SUBTLE=غامض LINK_EMPHASIZED=مؤكد @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=إدخال الوقت TIMEPICKER_CLOCK_DIAL_LABEL=طلب الساعة +TIMEPICKER_INPUTS_ENTER_HOURS=يُرجى إدخال الساعات + +TIMEPICKER_INPUTS_ENTER_MINUTES=يُرجى إدخال الدقائق + +TIMEPICKER_INPUTS_ENTER_SECONDS=يُرجى إدخال الثواني + DURATION_INPUT_DESCRIPTION=إدخال المدة DATETIME_PICKER_DATE_BUTTON=التاريخ diff --git a/packages/main/src/i18n/messagebundle_bg.properties b/packages/main/src/i18n/messagebundle_bg.properties index ff34f66571bf..48eea972c884 100644 --- a/packages/main/src/i18n/messagebundle_bg.properties +++ b/packages/main/src/i18n/messagebundle_bg.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} резултати са налични INPUT_SUGGESTIONS_NO_HIT=Няма резултати +INPUT_CLEAR_ICON_ACC_NAME=Изчистване + LINK_SUBTLE=Блед LINK_EMPHASIZED=Подчертано @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Въвеждане на час TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат на часовник +TIMEPICKER_INPUTS_ENTER_HOURS=Моля, въведете час + +TIMEPICKER_INPUTS_ENTER_MINUTES=Моля, въведете минути + +TIMEPICKER_INPUTS_ENTER_SECONDS=Моля, въведете секунди + DURATION_INPUT_DESCRIPTION=Въвеждане на времетраене DATETIME_PICKER_DATE_BUTTON=Дата diff --git a/packages/main/src/i18n/messagebundle_ca.properties b/packages/main/src/i18n/messagebundle_ca.properties index 2e262e0420f9..aa1f0ad9bf0c 100644 --- a/packages/main/src/i18n/messagebundle_ca.properties +++ b/packages/main/src/i18n/messagebundle_ca.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultats disponibles INPUT_SUGGESTIONS_NO_HIT=Cap resultat +INPUT_CLEAR_ICON_ACC_NAME=Esborrar + LINK_SUBTLE=Discret LINK_EMPHASIZED=Destacat @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada d'hora TIMEPICKER_CLOCK_DIAL_LABEL=Esfera de rellotge +TIMEPICKER_INPUTS_ENTER_HOURS=Introduïu les hores + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduïu els minuts + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduïu els segons + DURATION_INPUT_DESCRIPTION=Entrada de durada DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_cs.properties b/packages/main/src/i18n/messagebundle_cs.properties index d58af5933db9..c6be7e603053 100644 --- a/packages/main/src/i18n/messagebundle_cs.properties +++ b/packages/main/src/i18n/messagebundle_cs.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} Výsledky jsou k dispozici INPUT_SUGGESTIONS_NO_HIT=Žádné výsledky +INPUT_CLEAR_ICON_ACC_NAME=Vyčistit + LINK_SUBTLE=Jemné LINK_EMPHASIZED=Zvýrazněné @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zadání času TIMEPICKER_CLOCK_DIAL_LABEL=Ciferník hodin +TIMEPICKER_INPUTS_ENTER_HOURS=Zadejte hodiny + +TIMEPICKER_INPUTS_ENTER_MINUTES=Zadejte minuty + +TIMEPICKER_INPUTS_ENTER_SECONDS=Zadejte sekundy + DURATION_INPUT_DESCRIPTION=Zadání trvání DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_cy.properties b/packages/main/src/i18n/messagebundle_cy.properties index 89f9a0964431..7c3912608a94 100644 --- a/packages/main/src/i18n/messagebundle_cy.properties +++ b/packages/main/src/i18n/messagebundle_cy.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} canlyniad ar gael INPUT_SUGGESTIONS_NO_HIT=Dim canlyniadau +INPUT_CLEAR_ICON_ACC_NAME=Clirio + LINK_SUBTLE=Cynnil LINK_EMPHASIZED=Wedi’i Bwysleisio @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Mewnbwn Amser TIMEPICKER_CLOCK_DIAL_LABEL=Deial Cloc +TIMEPICKER_INPUTS_ENTER_HOURS=Rhowch oriau + +TIMEPICKER_INPUTS_ENTER_MINUTES=Rhowch funudau + +TIMEPICKER_INPUTS_ENTER_SECONDS=Rhowch eiliadau + DURATION_INPUT_DESCRIPTION=Mewnbwn Hyd DATETIME_PICKER_DATE_BUTTON=Dyddiad diff --git a/packages/main/src/i18n/messagebundle_da.properties b/packages/main/src/i18n/messagebundle_da.properties index 79e620cfa2f7..3e54ecb78703 100644 --- a/packages/main/src/i18n/messagebundle_da.properties +++ b/packages/main/src/i18n/messagebundle_da.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultater er tilgængelige INPUT_SUGGESTIONS_NO_HIT=Ingen resultater +INPUT_CLEAR_ICON_ACC_NAME=Ryd + LINK_SUBTLE=Diskret LINK_EMPHASIZED=Fremhævet @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Tidsinput TIMEPICKER_CLOCK_DIAL_LABEL=Urskive +TIMEPICKER_INPUTS_ENTER_HOURS=Indtast timer + +TIMEPICKER_INPUTS_ENTER_MINUTES=Indtast minutter + +TIMEPICKER_INPUTS_ENTER_SECONDS=Indtast sekunder + DURATION_INPUT_DESCRIPTION=Varighedsinput DATETIME_PICKER_DATE_BUTTON=Dato diff --git a/packages/main/src/i18n/messagebundle_de.properties b/packages/main/src/i18n/messagebundle_de.properties index 1f45ce92f764..204d6ad395ba 100644 --- a/packages/main/src/i18n/messagebundle_de.properties +++ b/packages/main/src/i18n/messagebundle_de.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} Ergebnisse sind verfügbar INPUT_SUGGESTIONS_NO_HIT=Keine Ergebnisse +INPUT_CLEAR_ICON_ACC_NAME=Zurücksetzen + LINK_SUBTLE=Dezent LINK_EMPHASIZED=Hervorgehoben @@ -139,7 +141,7 @@ MESSAGE_STRIP_INFORMATION=Informationsleiste MULTICOMBOBOX_DIALOG_OK_BUTTON=OK -RADIO_BUTTON_GROUP_REQUIRED=Select one of the available options. +RADIO_BUTTON_GROUP_REQUIRED=Wählen Sie eine der verfügbaren Optionen aus. VALUE_STATE_ERROR_ALREADY_SELECTED=Wert ist bereits ausgewählt. @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zeiteingabe TIMEPICKER_CLOCK_DIAL_LABEL=Zifferblatt +TIMEPICKER_INPUTS_ENTER_HOURS=Stunde eingeben + +TIMEPICKER_INPUTS_ENTER_MINUTES=Minute eingeben + +TIMEPICKER_INPUTS_ENTER_SECONDS=Sekunde eingeben + DURATION_INPUT_DESCRIPTION=Eingabe der Dauer DATETIME_PICKER_DATE_BUTTON=Datum @@ -302,4 +310,4 @@ DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Zum Verschieben verwenden Sie die Pfeil DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Zum Verschieben verwenden Sie die Pfeiltasten; zum Ändern der Größe verwenden Sie die Umschalttaste + Pfeiltasten LABEL_COLON=: -TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Additional Options +TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Zusätzliche Optionen diff --git a/packages/main/src/i18n/messagebundle_el.properties b/packages/main/src/i18n/messagebundle_el.properties index 1499569b8841..85f93d6ceb0f 100644 --- a/packages/main/src/i18n/messagebundle_el.properties +++ b/packages/main/src/i18n/messagebundle_el.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} αποτελέσματα είναι διαθέσ INPUT_SUGGESTIONS_NO_HIT=Χωρίς αποτελέσματα +INPUT_CLEAR_ICON_ACC_NAME=Εκκαθάριση + LINK_SUBTLE=Διακριτικό LINK_EMPHASIZED=Τονισμένο @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Εισαγωγή Ώρας TIMEPICKER_CLOCK_DIAL_LABEL=Πληκτρολόγηση Ώρας +TIMEPICKER_INPUTS_ENTER_HOURS=Εισαγάγετε ώρες + +TIMEPICKER_INPUTS_ENTER_MINUTES=Εισαγάγετε λεπτά + +TIMEPICKER_INPUTS_ENTER_SECONDS=Εισαγάγετε δευτερόλεπτα + DURATION_INPUT_DESCRIPTION=Εισαγωγή Διάρκειας DATETIME_PICKER_DATE_BUTTON=Ημερομηνία diff --git a/packages/main/src/i18n/messagebundle_en.properties b/packages/main/src/i18n/messagebundle_en.properties index 05ecb2ac10b0..49885ad5bf28 100644 --- a/packages/main/src/i18n/messagebundle_en.properties +++ b/packages/main/src/i18n/messagebundle_en.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available INPUT_SUGGESTIONS_NO_HIT=No results +INPUT_CLEAR_ICON_ACC_NAME=Clear + LINK_SUBTLE=Subtle LINK_EMPHASIZED=Emphasized @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Time Input TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds + DURATION_INPUT_DESCRIPTION=Duration Input DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_en_GB.properties b/packages/main/src/i18n/messagebundle_en_GB.properties index b3c90f0b0a92..4b4e8be75157 100644 --- a/packages/main/src/i18n/messagebundle_en_GB.properties +++ b/packages/main/src/i18n/messagebundle_en_GB.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available INPUT_SUGGESTIONS_NO_HIT=No results +INPUT_CLEAR_ICON_ACC_NAME=Clear + LINK_SUBTLE=Subtle LINK_EMPHASIZED=Emphasised @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Time Input TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds + DURATION_INPUT_DESCRIPTION=Duration Input DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties index 4293aa952876..9878a22c5d84 100644 --- a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties +++ b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=[[[Ţįɱē Ĭŋρűţ∙∙∙∙]]] TIMEPICKER_CLOCK_DIAL_LABEL=[[[Ĉĺŏċķ Ďįąĺ∙∙∙∙]]] +TIMEPICKER_INPUTS_ENTER_HOURS=[[[Ƥĺēąşē ēŋţēŗ ĥŏűŗş∙∙∙∙∙∙]]] + +TIMEPICKER_INPUTS_ENTER_MINUTES=[[[Ƥĺēąşē ēŋţēŗ ɱįŋűţēş∙∙∙∙]]] + +TIMEPICKER_INPUTS_ENTER_SECONDS=[[[Ƥĺēąşē ēŋţēŗ şēċŏŋƌş∙∙∙∙]]] + DURATION_INPUT_DESCRIPTION=[[[Ďűŗąţįŏŋ Ĭŋρűţ∙∙∙∙∙]]] DATETIME_PICKER_DATE_BUTTON=[[[Ďąţē]]] diff --git a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties index 17f67667c30d..ae9af22b3d53 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties +++ b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=‍‌‍‌‍‍​​‍‍​​‌​ TIMEPICKER_CLOCK_DIAL_LABEL=‌‍​‌‌​​​​‍‌​​​​‌‌‍‍‍‍‌‌‍‍‌​‌‌‍‌‍‍​​‍‍‌‌​Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=‌‍​​‌​‍​‍‌‍​​‌‌‍​​​‍​​​‍‌‌‌‌‍​‍​‍‌‍‍‌​​‌Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=‍‌‍​‌‍‌‌​‍‍​‍‍‌‌‍‌‌‌​​‍​‌​​​​‍‌‌​​‌‌​‍‍‍Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=‌​‍‌‌‌‍‌‌‍‌‍​​‌​‌​‌​‌​‍‌‌‌‍‌​‌​​​‌​‍‍‌‌‍‍Please enter seconds + DURATION_INPUT_DESCRIPTION=‍‍‍‍​‍‌‍​‌‍‌‌‍‌‍‌​​‌​​‍‌‌‍‌‍‍‌‍​‍​‍‍‍‌‍‍Duration Input DATETIME_PICKER_DATE_BUTTON=‌‌‌‌​‌‍‌‌​‍‍‍‌‌‌​‌​‍‍‌‍​‍​‌‍‍‌‍‌‌‍‌‌‌​‌​‍Date diff --git a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties index 5eb06d809ffa..2a33b6a5f395 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties +++ b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=5W4XgHn2RMpCgiWpkl9+Mw_Time Input TIMEPICKER_CLOCK_DIAL_LABEL=3lW27/s9KRCchbQWqvbpSA_Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=lytu6KNiQJf+Pnh1NITTlg_Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=QOX3PgnJlZu5vF7uJSD+Bg_Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=eFXFsAUwdVRuFFGNqfQ8zw_Please enter seconds + DURATION_INPUT_DESCRIPTION=K8i+jptpLJGMAFLNWV5O5A_Duration Input DATETIME_PICKER_DATE_BUTTON=WMB6EthjmUNV8kYnBWYsPA_Date diff --git a/packages/main/src/i18n/messagebundle_es.properties b/packages/main/src/i18n/messagebundle_es.properties index 0b96acf63407..baa2b15bfa70 100644 --- a/packages/main/src/i18n/messagebundle_es.properties +++ b/packages/main/src/i18n/messagebundle_es.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados están disponibles INPUT_SUGGESTIONS_NO_HIT=Sin resultados +INPUT_CLEAR_ICON_ACC_NAME=Borrar + LINK_SUBTLE=Discreto LINK_EMPHASIZED=Resaltado @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada de hora TIMEPICKER_CLOCK_DIAL_LABEL=Esfera de reloj +TIMEPICKER_INPUTS_ENTER_HOURS=Introduzca las horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduzca los minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduzca los segundos + DURATION_INPUT_DESCRIPTION=Entrada de duración DATETIME_PICKER_DATE_BUTTON=Fecha diff --git a/packages/main/src/i18n/messagebundle_es_MX.properties b/packages/main/src/i18n/messagebundle_es_MX.properties index e326543356ef..7f88f4abe84e 100644 --- a/packages/main/src/i18n/messagebundle_es_MX.properties +++ b/packages/main/src/i18n/messagebundle_es_MX.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados disponibles INPUT_SUGGESTIONS_NO_HIT=Ningún resultado +INPUT_CLEAR_ICON_ACC_NAME=Borrar + LINK_SUBTLE=Sutil LINK_EMPHASIZED=Resaltado @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada de hora TIMEPICKER_CLOCK_DIAL_LABEL=Esfera de reloj +TIMEPICKER_INPUTS_ENTER_HOURS=Ingrese las horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Ingrese los minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Ingrese los segundos + DURATION_INPUT_DESCRIPTION=Entrada de duración DATETIME_PICKER_DATE_BUTTON=Fecha diff --git a/packages/main/src/i18n/messagebundle_et.properties b/packages/main/src/i18n/messagebundle_et.properties index 916d9af6d99a..1c4e42cfd4ab 100644 --- a/packages/main/src/i18n/messagebundle_et.properties +++ b/packages/main/src/i18n/messagebundle_et.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} tulemust on saadaval INPUT_SUGGESTIONS_NO_HIT=Tulemusi pole +INPUT_CLEAR_ICON_ACC_NAME=Tühjenda + LINK_SUBTLE=Peenike LINK_EMPHASIZED=Rõhutatud @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Kellaajasisend TIMEPICKER_CLOCK_DIAL_LABEL=Kella numbrilaud +TIMEPICKER_INPUTS_ENTER_HOURS=Sisestage tunnid + +TIMEPICKER_INPUTS_ENTER_MINUTES=Sisestage minutid + +TIMEPICKER_INPUTS_ENTER_SECONDS=Sisestage sekundid + DURATION_INPUT_DESCRIPTION=Kestusesisend DATETIME_PICKER_DATE_BUTTON=Kuupäev diff --git a/packages/main/src/i18n/messagebundle_fi.properties b/packages/main/src/i18n/messagebundle_fi.properties index 692935e741b3..2feea504066d 100644 --- a/packages/main/src/i18n/messagebundle_fi.properties +++ b/packages/main/src/i18n/messagebundle_fi.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} tulosta käytettävissä INPUT_SUGGESTIONS_NO_HIT=Ei tuloksia +INPUT_CLEAR_ICON_ACC_NAME=Tyhjennä + LINK_SUBTLE=Hillitty LINK_EMPHASIZED=Korostettu @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Ajan syöttö TIMEPICKER_CLOCK_DIAL_LABEL=Kellotaulu +TIMEPICKER_INPUTS_ENTER_HOURS=Syötä tunnit + +TIMEPICKER_INPUTS_ENTER_MINUTES=Syötä minuutit + +TIMEPICKER_INPUTS_ENTER_SECONDS=Syötä sekunnit + DURATION_INPUT_DESCRIPTION=Keston syöttö DATETIME_PICKER_DATE_BUTTON=Päivämäärä diff --git a/packages/main/src/i18n/messagebundle_fr.properties b/packages/main/src/i18n/messagebundle_fr.properties index 35a0202bc1d6..d85af8f15c14 100644 --- a/packages/main/src/i18n/messagebundle_fr.properties +++ b/packages/main/src/i18n/messagebundle_fr.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} résultats sont disponibles. INPUT_SUGGESTIONS_NO_HIT=Aucun résultat +INPUT_CLEAR_ICON_ACC_NAME=Réinitialiser + LINK_SUBTLE=Subtil LINK_EMPHASIZED=Mis en surbrillance @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Saisie de l'heure TIMEPICKER_CLOCK_DIAL_LABEL=Cadran horloge +TIMEPICKER_INPUTS_ENTER_HOURS=Entrez les heures. + +TIMEPICKER_INPUTS_ENTER_MINUTES=Entrez les minutes. + +TIMEPICKER_INPUTS_ENTER_SECONDS=Entrez les secondes. + DURATION_INPUT_DESCRIPTION=Saisie de la durée DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_fr_CA.properties b/packages/main/src/i18n/messagebundle_fr_CA.properties index ccb7f45a56a9..1d92d77152ea 100644 --- a/packages/main/src/i18n/messagebundle_fr_CA.properties +++ b/packages/main/src/i18n/messagebundle_fr_CA.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} résultats disponibles INPUT_SUGGESTIONS_NO_HIT=Aucun résultat +INPUT_CLEAR_ICON_ACC_NAME=Réinitialiser + LINK_SUBTLE=Discret LINK_EMPHASIZED=Accentué @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Saisie de l'heure TIMEPICKER_CLOCK_DIAL_LABEL=Cadran horloge +TIMEPICKER_INPUTS_ENTER_HOURS=Saisissez les heures. + +TIMEPICKER_INPUTS_ENTER_MINUTES=Saisissez les minutes. + +TIMEPICKER_INPUTS_ENTER_SECONDS=Saisissez les secondes. + DURATION_INPUT_DESCRIPTION=Saisie de la durée DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_hi.properties b/packages/main/src/i18n/messagebundle_hi.properties index 2587829c66d0..c3953bfa1a62 100644 --- a/packages/main/src/i18n/messagebundle_hi.properties +++ b/packages/main/src/i18n/messagebundle_hi.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} परिणाम उपलब्ध है INPUT_SUGGESTIONS_NO_HIT=कोई परिणाम नहीं +INPUT_CLEAR_ICON_ACC_NAME=साफ करें + LINK_SUBTLE=सूक्ष्म LINK_EMPHASIZED=बल दिया गया @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=समय इनपुट TIMEPICKER_CLOCK_DIAL_LABEL=क्लॉक डायल +TIMEPICKER_INPUTS_ENTER_HOURS=कृपया घंटे दर्ज करें + +TIMEPICKER_INPUTS_ENTER_MINUTES=कृपया मिनट दर्ज करें + +TIMEPICKER_INPUTS_ENTER_SECONDS=कृपया सेकंड दर्ज करें + DURATION_INPUT_DESCRIPTION=अवधि इनपुट DATETIME_PICKER_DATE_BUTTON=दिनांक diff --git a/packages/main/src/i18n/messagebundle_hr.properties b/packages/main/src/i18n/messagebundle_hr.properties index 85de2a211d10..59669454419b 100644 --- a/packages/main/src/i18n/messagebundle_hr.properties +++ b/packages/main/src/i18n/messagebundle_hr.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultata raspoloživo INPUT_SUGGESTIONS_NO_HIT=Nema rezultata +INPUT_CLEAR_ICON_ACC_NAME=Poništi + LINK_SUBTLE=Rafinirano LINK_EMPHASIZED=Istaknuto @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Unos vremena TIMEPICKER_CLOCK_DIAL_LABEL=Brojčanik sata +TIMEPICKER_INPUTS_ENTER_HOURS=Unesite sate + +TIMEPICKER_INPUTS_ENTER_MINUTES=Unesite minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Unesite sekunde + DURATION_INPUT_DESCRIPTION=Unos trajanja DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_hu.properties b/packages/main/src/i18n/messagebundle_hu.properties index c461671a6794..1c52ddfc7530 100644 --- a/packages/main/src/i18n/messagebundle_hu.properties +++ b/packages/main/src/i18n/messagebundle_hu.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} találat INPUT_SUGGESTIONS_NO_HIT=Nincs találat +INPUT_CLEAR_ICON_ACC_NAME=Törlés + LINK_SUBTLE=Szolid LINK_EMPHASIZED=Kiemelt @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Idő bevitele TIMEPICKER_CLOCK_DIAL_LABEL=Óraszámlap +TIMEPICKER_INPUTS_ENTER_HOURS=Adja meg az órákat + +TIMEPICKER_INPUTS_ENTER_MINUTES=Adja meg a perceket + +TIMEPICKER_INPUTS_ENTER_SECONDS=Adja meg a másodperceket + DURATION_INPUT_DESCRIPTION=Időtartam bevitele DATETIME_PICKER_DATE_BUTTON=Dátum diff --git a/packages/main/src/i18n/messagebundle_id.properties b/packages/main/src/i18n/messagebundle_id.properties index 107e9e892f59..e87f813ae637 100644 --- a/packages/main/src/i18n/messagebundle_id.properties +++ b/packages/main/src/i18n/messagebundle_id.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} hasil tersedia INPUT_SUGGESTIONS_NO_HIT=Tidak ada hasil +INPUT_CLEAR_ICON_ACC_NAME=Hapus + LINK_SUBTLE=Halus LINK_EMPHASIZED=Ditekankan @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Input Waktu TIMEPICKER_CLOCK_DIAL_LABEL=Tampilan Jam +TIMEPICKER_INPUTS_ENTER_HOURS=Harap masukkan jam + +TIMEPICKER_INPUTS_ENTER_MINUTES=Harap masukkan menit + +TIMEPICKER_INPUTS_ENTER_SECONDS=Harap masukkan detik + DURATION_INPUT_DESCRIPTION=Input Durasi DATETIME_PICKER_DATE_BUTTON=Tanggal diff --git a/packages/main/src/i18n/messagebundle_it.properties b/packages/main/src/i18n/messagebundle_it.properties index 6f0a310059b7..983c19f19c78 100644 --- a/packages/main/src/i18n/messagebundle_it.properties +++ b/packages/main/src/i18n/messagebundle_it.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} risultati disponibili INPUT_SUGGESTIONS_NO_HIT=Nessun risultato +INPUT_CLEAR_ICON_ACC_NAME=Cancella + LINK_SUBTLE=Discreto LINK_EMPHASIZED=Evidenziato @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Inserimento ora TIMEPICKER_CLOCK_DIAL_LABEL=Quadrante dell’orologio +TIMEPICKER_INPUTS_ENTER_HOURS=Inserisci ore + +TIMEPICKER_INPUTS_ENTER_MINUTES=Inserisci minuti + +TIMEPICKER_INPUTS_ENTER_SECONDS=Inserisci secondi + DURATION_INPUT_DESCRIPTION=Inserimento durata DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_iw.properties b/packages/main/src/i18n/messagebundle_iw.properties index 5e118640dff0..1acc7be7f01e 100644 --- a/packages/main/src/i18n/messagebundle_iw.properties +++ b/packages/main/src/i18n/messagebundle_iw.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} תוצאות זמינות INPUT_SUGGESTIONS_NO_HIT=אין תוצאות +INPUT_CLEAR_ICON_ACC_NAME=נקה + LINK_SUBTLE=עדין LINK_EMPHASIZED=מודגש @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=קלט של שעה TIMEPICKER_CLOCK_DIAL_LABEL=מחוגה של שעון +TIMEPICKER_INPUTS_ENTER_HOURS=הזן שעות + +TIMEPICKER_INPUTS_ENTER_MINUTES=הזן דקות + +TIMEPICKER_INPUTS_ENTER_SECONDS=הזן שניות + DURATION_INPUT_DESCRIPTION=קלט של משך זמן DATETIME_PICKER_DATE_BUTTON=תאריך diff --git a/packages/main/src/i18n/messagebundle_ja.properties b/packages/main/src/i18n/messagebundle_ja.properties index 8ba1bff4f150..593479bb0eaa 100644 --- a/packages/main/src/i18n/messagebundle_ja.properties +++ b/packages/main/src/i18n/messagebundle_ja.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} の結果が利用可能です INPUT_SUGGESTIONS_NO_HIT=結果がありません +INPUT_CLEAR_ICON_ACC_NAME=クリア + LINK_SUBTLE=淡色 LINK_EMPHASIZED=強調 @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=時刻入力 TIMEPICKER_CLOCK_DIAL_LABEL=時計ダイアル +TIMEPICKER_INPUTS_ENTER_HOURS=時間数を入力してください + +TIMEPICKER_INPUTS_ENTER_MINUTES=分数を入力してください + +TIMEPICKER_INPUTS_ENTER_SECONDS=秒数を入力してください + DURATION_INPUT_DESCRIPTION=期間入力 DATETIME_PICKER_DATE_BUTTON=日付 diff --git a/packages/main/src/i18n/messagebundle_kk.properties b/packages/main/src/i18n/messagebundle_kk.properties index 7b62e06fa1ca..b6626f1d10d7 100644 --- a/packages/main/src/i18n/messagebundle_kk.properties +++ b/packages/main/src/i18n/messagebundle_kk.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} нәтиже бар INPUT_SUGGESTIONS_NO_HIT=Нәтижелерсіз +INPUT_CLEAR_ICON_ACC_NAME=Тазарту + LINK_SUBTLE=Білінбейтін LINK_EMPHASIZED=Ерекшеленген @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Уақыт енгізу TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат +TIMEPICKER_INPUTS_ENTER_HOURS=Сағаттар енгізіңіз + +TIMEPICKER_INPUTS_ENTER_MINUTES=Минуттар енгізіңіз + +TIMEPICKER_INPUTS_ENTER_SECONDS=Секундтар енгізіңіз + DURATION_INPUT_DESCRIPTION=Ұзақтық енгізу DATETIME_PICKER_DATE_BUTTON=Күні diff --git a/packages/main/src/i18n/messagebundle_ko.properties b/packages/main/src/i18n/messagebundle_ko.properties index abe5631e5d96..9271e153d127 100644 --- a/packages/main/src/i18n/messagebundle_ko.properties +++ b/packages/main/src/i18n/messagebundle_ko.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0}개 결과를 사용할 수 있습니다. INPUT_SUGGESTIONS_NO_HIT=결과 없음 +INPUT_CLEAR_ICON_ACC_NAME=지우기 + LINK_SUBTLE=미약 LINK_EMPHASIZED=강조 @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=시간 입력 TIMEPICKER_CLOCK_DIAL_LABEL=시계 다이얼 +TIMEPICKER_INPUTS_ENTER_HOURS=시간을 입력하십시오. + +TIMEPICKER_INPUTS_ENTER_MINUTES=분을 입력하십시오. + +TIMEPICKER_INPUTS_ENTER_SECONDS=초를 입력하십시오. + DURATION_INPUT_DESCRIPTION=기간 입력 DATETIME_PICKER_DATE_BUTTON=일자 diff --git a/packages/main/src/i18n/messagebundle_lt.properties b/packages/main/src/i18n/messagebundle_lt.properties index b83c4328d965..163ce5921d0f 100644 --- a/packages/main/src/i18n/messagebundle_lt.properties +++ b/packages/main/src/i18n/messagebundle_lt.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Pateikta rezultatų: {0} INPUT_SUGGESTIONS_NO_HIT=Nėra rezultatų +INPUT_CLEAR_ICON_ACC_NAME=Valyti + LINK_SUBTLE=Subtilus LINK_EMPHASIZED=Išryškintas @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Laiko įvestis TIMEPICKER_CLOCK_DIAL_LABEL=Laikrodžio ciferblatas +TIMEPICKER_INPUTS_ENTER_HOURS=Įveskite valandas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Įveskite minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Įveskite sekundes + DURATION_INPUT_DESCRIPTION=Trukmės įvestis DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_lv.properties b/packages/main/src/i18n/messagebundle_lv.properties index 6e3fcdcc76d3..3e6c1de715da 100644 --- a/packages/main/src/i18n/messagebundle_lv.properties +++ b/packages/main/src/i18n/messagebundle_lv.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Ir pieejami {0} rezultāti INPUT_SUGGESTIONS_NO_HIT=Bez rezultātiem +INPUT_CLEAR_ICON_ACC_NAME=Notīrīt + LINK_SUBTLE=Smalks LINK_EMPHASIZED=Uzsvērts @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Laika ievade TIMEPICKER_CLOCK_DIAL_LABEL=Pulksteņiezvane +TIMEPICKER_INPUTS_ENTER_HOURS=Lūdzu, ievadīt stundas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Lūdzu, ievadīt minūtes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Lūdzu, ievadīt sekundes + DURATION_INPUT_DESCRIPTION=Ilguma ievade DATETIME_PICKER_DATE_BUTTON=Datums diff --git a/packages/main/src/i18n/messagebundle_ms.properties b/packages/main/src/i18n/messagebundle_ms.properties index a082cbe2b68f..8f5d5ce85d07 100644 --- a/packages/main/src/i18n/messagebundle_ms.properties +++ b/packages/main/src/i18n/messagebundle_ms.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} hasil tersedia INPUT_SUGGESTIONS_NO_HIT=Tiada hasil +INPUT_CLEAR_ICON_ACC_NAME=Kosongkan + LINK_SUBTLE=Kecil LINK_EMPHASIZED=Ditekankan @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Input Masa TIMEPICKER_CLOCK_DIAL_LABEL=Dail Jam +TIMEPICKER_INPUTS_ENTER_HOURS=Sila masukkan jam + +TIMEPICKER_INPUTS_ENTER_MINUTES=Sila masukkan minit + +TIMEPICKER_INPUTS_ENTER_SECONDS=Sila masukkan saat + DURATION_INPUT_DESCRIPTION=Input Jangka Masa DATETIME_PICKER_DATE_BUTTON=Tarikh diff --git a/packages/main/src/i18n/messagebundle_nl.properties b/packages/main/src/i18n/messagebundle_nl.properties index 689f473778c0..39dfda2a38a5 100644 --- a/packages/main/src/i18n/messagebundle_nl.properties +++ b/packages/main/src/i18n/messagebundle_nl.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultaten beschikbaar INPUT_SUGGESTIONS_NO_HIT=Geen resultaten +INPUT_CLEAR_ICON_ACC_NAME=Wissen + LINK_SUBTLE=Subtiel LINK_EMPHASIZED=Geaccentueerd @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Tijdinvoer TIMEPICKER_CLOCK_DIAL_LABEL=Wijzerplaat van klok +TIMEPICKER_INPUTS_ENTER_HOURS=Uren invoeren + +TIMEPICKER_INPUTS_ENTER_MINUTES=Minuten invoeren + +TIMEPICKER_INPUTS_ENTER_SECONDS=Seconden invoeren + DURATION_INPUT_DESCRIPTION=Duurinvoer DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_no.properties b/packages/main/src/i18n/messagebundle_no.properties index b8e143a6b099..15a8a2f1dac1 100644 --- a/packages/main/src/i18n/messagebundle_no.properties +++ b/packages/main/src/i18n/messagebundle_no.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultater er tilgjengelige INPUT_SUGGESTIONS_NO_HIT=Ingen resultater +INPUT_CLEAR_ICON_ACC_NAME=Tilbakestill + LINK_SUBTLE=Diskret LINK_EMPHASIZED=Uthevet @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Inntasting av tidspunkt TIMEPICKER_CLOCK_DIAL_LABEL=Urskive +TIMEPICKER_INPUTS_ENTER_HOURS=Oppgi timer + +TIMEPICKER_INPUTS_ENTER_MINUTES=Oppgi minutter + +TIMEPICKER_INPUTS_ENTER_SECONDS=Oppgi sekunder + DURATION_INPUT_DESCRIPTION=Inntasting av varighet DATETIME_PICKER_DATE_BUTTON=Dato diff --git a/packages/main/src/i18n/messagebundle_pl.properties b/packages/main/src/i18n/messagebundle_pl.properties index 451d20215f07..37ffd0495be7 100644 --- a/packages/main/src/i18n/messagebundle_pl.properties +++ b/packages/main/src/i18n/messagebundle_pl.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Liczba dostępnych wyników: {0} INPUT_SUGGESTIONS_NO_HIT=Brak wyników +INPUT_CLEAR_ICON_ACC_NAME=Wyczyść + LINK_SUBTLE=Delikatne LINK_EMPHASIZED=Podświetlone @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Wpis czasu TIMEPICKER_CLOCK_DIAL_LABEL=Tarcza zegara +TIMEPICKER_INPUTS_ENTER_HOURS=Wprowadź godziny + +TIMEPICKER_INPUTS_ENTER_MINUTES=Wprowadź minuty + +TIMEPICKER_INPUTS_ENTER_SECONDS=Wprowadź sekundy + DURATION_INPUT_DESCRIPTION=Wpis czasu trwania DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_pt.properties b/packages/main/src/i18n/messagebundle_pt.properties index f41e5f826e91..1b1321af3cec 100644 --- a/packages/main/src/i18n/messagebundle_pt.properties +++ b/packages/main/src/i18n/messagebundle_pt.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados estão disponíveis INPUT_SUGGESTIONS_NO_HIT=Nenhum resultado +INPUT_CLEAR_ICON_ACC_NAME=Limpar + LINK_SUBTLE=Discreto LINK_EMPHASIZED=Destacado @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada de hora TIMEPICKER_CLOCK_DIAL_LABEL=Relógio +TIMEPICKER_INPUTS_ENTER_HOURS=Insira horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Insira minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Insira segundos + DURATION_INPUT_DESCRIPTION=Entrada de duração DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_pt_PT.properties b/packages/main/src/i18n/messagebundle_pt_PT.properties index a2ceb135bf57..d60741cc31ad 100644 --- a/packages/main/src/i18n/messagebundle_pt_PT.properties +++ b/packages/main/src/i18n/messagebundle_pt_PT.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados disponíveis INPUT_SUGGESTIONS_NO_HIT=Sem resultados +INPUT_CLEAR_ICON_ACC_NAME=Limpar + LINK_SUBTLE=Subtil LINK_EMPHASIZED=Realçado @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Introdução de hora TIMEPICKER_CLOCK_DIAL_LABEL=Mostrador de relógio +TIMEPICKER_INPUTS_ENTER_HOURS=Introduza horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduza minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduza segundos + DURATION_INPUT_DESCRIPTION=Introdução de duração DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_ro.properties b/packages/main/src/i18n/messagebundle_ro.properties index d3ae62238005..5c4ce9eac3fc 100644 --- a/packages/main/src/i18n/messagebundle_ro.properties +++ b/packages/main/src/i18n/messagebundle_ro.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultate sunt disponibile INPUT_SUGGESTIONS_NO_HIT=Fără rezultate +INPUT_CLEAR_ICON_ACC_NAME=Resetare + LINK_SUBTLE=Discret LINK_EMPHASIZED=Evidenţiat @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Intrare oră TIMEPICKER_CLOCK_DIAL_LABEL=Cadran orar +TIMEPICKER_INPUTS_ENTER_HOURS=Introduceți ore + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduceți minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduceți secunde + DURATION_INPUT_DESCRIPTION=Intrare durată DATETIME_PICKER_DATE_BUTTON=Dată diff --git a/packages/main/src/i18n/messagebundle_ru.properties b/packages/main/src/i18n/messagebundle_ru.properties index c75690204acb..9528c76a125c 100644 --- a/packages/main/src/i18n/messagebundle_ru.properties +++ b/packages/main/src/i18n/messagebundle_ru.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Доступно результатов: {0} INPUT_SUGGESTIONS_NO_HIT=Нет результатов +INPUT_CLEAR_ICON_ACC_NAME=Очистить + LINK_SUBTLE=Незаметная LINK_EMPHASIZED=Выделенная @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Ввод времени TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат +TIMEPICKER_INPUTS_ENTER_HOURS=Введите часы + +TIMEPICKER_INPUTS_ENTER_MINUTES=Введите минуты + +TIMEPICKER_INPUTS_ENTER_SECONDS=Введите секунды + DURATION_INPUT_DESCRIPTION=Ввод продолжительности DATETIME_PICKER_DATE_BUTTON=Дата diff --git a/packages/main/src/i18n/messagebundle_sh.properties b/packages/main/src/i18n/messagebundle_sh.properties index bdbc298ff246..2b95c2bb2348 100644 --- a/packages/main/src/i18n/messagebundle_sh.properties +++ b/packages/main/src/i18n/messagebundle_sh.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultata je dostupno INPUT_SUGGESTIONS_NO_HIT=Nema rezultata +INPUT_CLEAR_ICON_ACC_NAME=Poništi + LINK_SUBTLE=Suptilno LINK_EMPHASIZED=Naglašeno @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Unos vremena TIMEPICKER_CLOCK_DIAL_LABEL=Brojčanik sata +TIMEPICKER_INPUTS_ENTER_HOURS=Unesite sate + +TIMEPICKER_INPUTS_ENTER_MINUTES=Unesite minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Unesite sekunde + DURATION_INPUT_DESCRIPTION=Unos trajanja DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_sk.properties b/packages/main/src/i18n/messagebundle_sk.properties index 627a7bfc2697..eee0fe3fc5a6 100644 --- a/packages/main/src/i18n/messagebundle_sk.properties +++ b/packages/main/src/i18n/messagebundle_sk.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=K dispozícii je {0} výsledkov INPUT_SUGGESTIONS_NO_HIT=Žiadne výsledky +INPUT_CLEAR_ICON_ACC_NAME=Vymazať + LINK_SUBTLE=Jednoduché LINK_EMPHASIZED=Zvýraznené @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zadanie času TIMEPICKER_CLOCK_DIAL_LABEL=Ciferník hodín +TIMEPICKER_INPUTS_ENTER_HOURS=Zadajte hodiny + +TIMEPICKER_INPUTS_ENTER_MINUTES=Zadajte minúty + +TIMEPICKER_INPUTS_ENTER_SECONDS=Zadajte sekundy + DURATION_INPUT_DESCRIPTION=Zadanie trvania DATETIME_PICKER_DATE_BUTTON=Dátum diff --git a/packages/main/src/i18n/messagebundle_sl.properties b/packages/main/src/i18n/messagebundle_sl.properties index aba53b26137b..e0f4356d1221 100644 --- a/packages/main/src/i18n/messagebundle_sl.properties +++ b/packages/main/src/i18n/messagebundle_sl.properties @@ -5,7 +5,7 @@ ARIA_ROLEDESCRIPTION_CARD=Kartica ARIA_ROLEDESCRIPTION_CARD_HEADER=Glava kartice -ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interkativna glava kartice +ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interaktivna glava kartice AVATAR_TOOLTIP=Avatar @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Na voljo {0} rezultatov INPUT_SUGGESTIONS_NO_HIT=Ni rezultatov +INPUT_CLEAR_ICON_ACC_NAME=Počisti + LINK_SUBTLE=Neizpostavljeno LINK_EMPHASIZED=Poudarjeno @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Vnos časa TIMEPICKER_CLOCK_DIAL_LABEL=Številčnica ure +TIMEPICKER_INPUTS_ENTER_HOURS=Vnesite ure + +TIMEPICKER_INPUTS_ENTER_MINUTES=Vnesite minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Vnesite sekunde + DURATION_INPUT_DESCRIPTION=Vnos trajanja DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_sv.properties b/packages/main/src/i18n/messagebundle_sv.properties index 6f50eaada025..f9ba1bb96bd2 100644 --- a/packages/main/src/i18n/messagebundle_sv.properties +++ b/packages/main/src/i18n/messagebundle_sv.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultat är tillgängliga INPUT_SUGGESTIONS_NO_HIT=Inga resultat +INPUT_CLEAR_ICON_ACC_NAME=Rensa + LINK_SUBTLE=Diskret LINK_EMPHASIZED=Markerad @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Tidsinmatning TIMEPICKER_CLOCK_DIAL_LABEL=Urtavla +TIMEPICKER_INPUTS_ENTER_HOURS=Ange timmar + +TIMEPICKER_INPUTS_ENTER_MINUTES=Ange minuter + +TIMEPICKER_INPUTS_ENTER_SECONDS=Ange sekunder + DURATION_INPUT_DESCRIPTION=Tidslängdsinmatning DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_th.properties b/packages/main/src/i18n/messagebundle_th.properties index f279c79aacd0..8104e2182556 100644 --- a/packages/main/src/i18n/messagebundle_th.properties +++ b/packages/main/src/i18n/messagebundle_th.properties @@ -9,7 +9,7 @@ ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=ส่วนหัวของบ AVATAR_TOOLTIP=ภาพสัญลักษณ์ -AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=แสดง {0}, ซ่อน {1} +AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL=แสดง {0}, ซ่อน {1} AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL=เปิดใช้งานสำหรับรายการทั้งหมด @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=มีผลลัพธ์ {0} รายการ INPUT_SUGGESTIONS_NO_HIT=ไม่มีผลลัพธ์ +INPUT_CLEAR_ICON_ACC_NAME=ล้าง + LINK_SUBTLE=ละเอียด LINK_EMPHASIZED=เน้น @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=การป้อนข้อมูลเวลา TIMEPICKER_CLOCK_DIAL_LABEL=หน้าปัดนาฬิกา +TIMEPICKER_INPUTS_ENTER_HOURS=กรุณาป้อนชั่วโมง + +TIMEPICKER_INPUTS_ENTER_MINUTES=กรุณาป้อนนาที + +TIMEPICKER_INPUTS_ENTER_SECONDS=กรุณาป้อนวินาที + DURATION_INPUT_DESCRIPTION=การป้อนข้อมูลระยะเวลา DATETIME_PICKER_DATE_BUTTON=วันที่ diff --git a/packages/main/src/i18n/messagebundle_tr.properties b/packages/main/src/i18n/messagebundle_tr.properties index 18e48a3e0fe0..cda49b5db14f 100644 --- a/packages/main/src/i18n/messagebundle_tr.properties +++ b/packages/main/src/i18n/messagebundle_tr.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} sonuç mevcut INPUT_SUGGESTIONS_NO_HIT=Sonuç yok +INPUT_CLEAR_ICON_ACC_NAME=Temizle + LINK_SUBTLE=İnce LINK_EMPHASIZED=Vurgulu @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zaman girişi TIMEPICKER_CLOCK_DIAL_LABEL=Saat kadranı +TIMEPICKER_INPUTS_ENTER_HOURS=Saat girin + +TIMEPICKER_INPUTS_ENTER_MINUTES=Dakika girin + +TIMEPICKER_INPUTS_ENTER_SECONDS=Saniye girin + DURATION_INPUT_DESCRIPTION=Süre girişi DATETIME_PICKER_DATE_BUTTON=Tarih diff --git a/packages/main/src/i18n/messagebundle_uk.properties b/packages/main/src/i18n/messagebundle_uk.properties index 2e8d0ff19394..1ec7e1d53039 100644 --- a/packages/main/src/i18n/messagebundle_uk.properties +++ b/packages/main/src/i18n/messagebundle_uk.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} результатів доступно INPUT_SUGGESTIONS_NO_HIT=Немає результатів +INPUT_CLEAR_ICON_ACC_NAME=Очистити + LINK_SUBTLE=Прихований LINK_EMPHASIZED=Виділено @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Введення часу TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат +TIMEPICKER_INPUTS_ENTER_HOURS=Введіть години + +TIMEPICKER_INPUTS_ENTER_MINUTES=Введіть хвилини + +TIMEPICKER_INPUTS_ENTER_SECONDS=Введіть секунди + DURATION_INPUT_DESCRIPTION=Введення тривалості DATETIME_PICKER_DATE_BUTTON=Дата diff --git a/packages/main/src/i18n/messagebundle_vi.properties b/packages/main/src/i18n/messagebundle_vi.properties index 06fcc0e24d94..b61de285c1d3 100644 --- a/packages/main/src/i18n/messagebundle_vi.properties +++ b/packages/main/src/i18n/messagebundle_vi.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} kết quả có sẵn INPUT_SUGGESTIONS_NO_HIT=Không có kết quả +INPUT_CLEAR_ICON_ACC_NAME=Xóa + LINK_SUBTLE=Tinh tế LINK_EMPHASIZED=Được nhấn mạnh @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Nhập thời gian TIMEPICKER_CLOCK_DIAL_LABEL=Quay số đồng hồ +TIMEPICKER_INPUTS_ENTER_HOURS=Vui lòng nhập giờ + +TIMEPICKER_INPUTS_ENTER_MINUTES=Vui lòng nhập phút + +TIMEPICKER_INPUTS_ENTER_SECONDS=Vui lòng nhập giây + DURATION_INPUT_DESCRIPTION=Nhập khoảng thời gian DATETIME_PICKER_DATE_BUTTON=Ngày diff --git a/packages/main/src/i18n/messagebundle_zh_CN.properties b/packages/main/src/i18n/messagebundle_zh_CN.properties index 15fd781bf37a..e24d4076f78a 100644 --- a/packages/main/src/i18n/messagebundle_zh_CN.properties +++ b/packages/main/src/i18n/messagebundle_zh_CN.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 个结果可用 INPUT_SUGGESTIONS_NO_HIT=无结果 +INPUT_CLEAR_ICON_ACC_NAME=清除 + LINK_SUBTLE=隐蔽 LINK_EMPHASIZED=加重 @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=时间输入 TIMEPICKER_CLOCK_DIAL_LABEL=钟表盘 +TIMEPICKER_INPUTS_ENTER_HOURS=请输入小时 + +TIMEPICKER_INPUTS_ENTER_MINUTES=请输入分钟 + +TIMEPICKER_INPUTS_ENTER_SECONDS=请输入秒 + DURATION_INPUT_DESCRIPTION=持续时间输入 DATETIME_PICKER_DATE_BUTTON=日期 diff --git a/packages/main/src/i18n/messagebundle_zh_TW.properties b/packages/main/src/i18n/messagebundle_zh_TW.properties index 85ca21485511..8ac266e03c2e 100644 --- a/packages/main/src/i18n/messagebundle_zh_TW.properties +++ b/packages/main/src/i18n/messagebundle_zh_TW.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 個可用的結果 INPUT_SUGGESTIONS_NO_HIT=沒有結果 +INPUT_CLEAR_ICON_ACC_NAME=清除 + LINK_SUBTLE=輕微 LINK_EMPHASIZED=強調 @@ -225,6 +227,12 @@ TIMEPICKER_INPUT_DESCRIPTION=時間輸入 TIMEPICKER_CLOCK_DIAL_LABEL=鐘面 +TIMEPICKER_INPUTS_ENTER_HOURS=請輸入小時 + +TIMEPICKER_INPUTS_ENTER_MINUTES=請輸入分鐘 + +TIMEPICKER_INPUTS_ENTER_SECONDS=請輸入秒數 + DURATION_INPUT_DESCRIPTION=持續期輸入 DATETIME_PICKER_DATE_BUTTON=日期 diff --git a/packages/main/src/popup-utils/PopoverRegistry.ts b/packages/main/src/popup-utils/PopoverRegistry.ts index 7151453cde9c..9547583f6766 100644 --- a/packages/main/src/popup-utils/PopoverRegistry.ts +++ b/packages/main/src/popup-utils/PopoverRegistry.ts @@ -38,11 +38,11 @@ const stopUpdateInterval = () => { }; const attachGlobalScrollHandler = () => { - document.body.addEventListener("scroll", repositionPopovers, { capture: true }); + document.addEventListener("scroll", repositionPopovers, { capture: true }); }; const detachGlobalScrollHandler = () => { - document.body.removeEventListener("scroll", repositionPopovers, { capture: true }); + document.removeEventListener("scroll", repositionPopovers, { capture: true }); }; const attachScrollHandler = (popover: Popover) => { diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css index 739cd43e7b3e..303ee11d4383 100644 --- a/packages/main/src/themes/Avatar.css +++ b/packages/main/src/themes/Avatar.css @@ -4,40 +4,40 @@ position: relative; } -/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/ +/* The ui5_hovered class is set by FileUploader to indicate hover state of the control */ :host(:not([hidden]).ui5_hovered) { opacity: .7; } -:host(:not([hidden]):not([pressed]):hover) { - box-shadow: var(--ui5-avatar-hover-box-shadow-offset); -} - -:host(:not([hidden])[focused]:not([pressed])) { - outline: var(--_ui5_avatar_outline); - outline-offset: var(--_ui5_avatar_focus_offset); -} - -:host(:not([disabled])[interactive]) { +:host(:is([interactive]):not([disabled])) { cursor: pointer; } -:host([disabled]) { - opacity: var(--sapContent_DisabledOpacity); -} - -:host(:not([hidden])[pressed]) { +:host(:is([interactive][pressed]):not([hidden])) { background: var(--sapButton_Active_Background); border-color: var(--sapButton_Active_BorderColor); color: var(--sapButton_Active_TextColor); } -:host(:not([hidden])[pressed]:hover) { +:host(:is([interactive][pressed]):not([hidden]):hover) { background: var(--sapButton_Selected_Hover_Background); border-color: var(--sapButton_Selected_Hover_BorderColor); color: var(--sapButton_Selected_TextColor); } +:host(:is([interactive]):not([hidden]):not([pressed]):not([disabled]):hover) { + box-shadow: var(--ui5-avatar-hover-box-shadow-offset); +} + +:host(:is([interactive][focused]):not([hidden]):not([pressed])) { + outline: var(--_ui5_avatar_outline); + outline-offset: var(--_ui5_avatar_focus_offset); +} + +:host(:is([disabled])) { + opacity: var(--sapContent_DisabledOpacity); +} + :host { height: 3rem; width: 3rem; @@ -57,7 +57,6 @@ } /* Sizes */ - :host([_size="XS"]), :host([size="XS"]) { height: 2rem; diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index 9d2625524629..2185879f7e73 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -54,7 +54,6 @@ :host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover), :host(:not([hidden]):not([disabled]).ui5_hovered) { background: var(--sapButton_Hover_Background); - box-shadow: var(--sapContent_Interaction_Shadow); border: 1px solid var(--sapButton_Hover_BorderColor); color: var(--sapButton_Hover_TextColor); } @@ -168,7 +167,6 @@ bdi { :host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) { background-color: var(--sapButton_Accept_Hover_Background); border-color: var(--sapButton_Accept_Hover_BorderColor); - box-shadow: var(--sapContent_Positive_Shadow); color: var(--sapButton_Accept_Hover_TextColor); } @@ -189,7 +187,6 @@ bdi { :host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) { background-color: var(--sapButton_Reject_Hover_Background); border-color: var(--sapButton_Reject_Hover_BorderColor); - box-shadow: var(--sapContent_Negative_Shadow); color: var(--sapButton_Reject_Hover_TextColor); } @@ -211,7 +208,6 @@ bdi { background-color: var(--sapButton_Attention_Hover_Background); border-color: var(--sapButton_Attention_Hover_BorderColor); color: var(--sapButton_Attention_Hover_TextColor); - box-shadow: var(--sapContent_Critical_Shadow) } :host([ui5-button][design="Attention"][active]:not([non-interactive])) { @@ -225,7 +221,7 @@ bdi { border-color: var(--sapButton_Emphasized_BorderColor); border-width: var(--_ui5_button_emphasized_border_width); color: var(--sapButton_Emphasized_TextColor); - font-weight: var(--_ui5_button_emphasized_font_weight); + font-weight: var(--sapButton_Emphasized_FontWeight); } /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/ @@ -235,7 +231,6 @@ bdi { border-color: var(--sapButton_Emphasized_Hover_BorderColor); border-width: var(--_ui5_button_emphasized_border_width); color: var(--sapButton_Emphasized_Hover_TextColor); - box-shadow: none; } :host([ui5-button][design="Empasized"][active]:not([non-interactive])) { @@ -245,10 +240,15 @@ bdi { } :host([design="Emphasized"][focused]) .ui5-button-root:after { - border-color: var(--sapContent_ContrastFocusColor); + border-color: var(--_ui5_button_emphasized_focused_border_color); outline: none; } +/* Belize related */ +:host([design="Emphasized"][focused][active]:not([non-interactive])) .ui5-button-root:after { + border-color: var(--_ui5_button_emphasized_focused_active_border_color); +} + :host([design="Transparent"]) { background-color: var(--sapButton_Lite_Background); color: var(--sapButton_Lite_TextColor); @@ -260,7 +260,6 @@ bdi { :host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) { background-color: var(--sapButton_Lite_Hover_Background); border-color: var(--sapButton_Lite_Hover_BorderColor); - box-shadow: var(--sapContent_Interaction_Shadow); color: var(--sapButton_Lite_Hover_TextColor); } diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css index 0ea7ed7a0476..38d1dc0f5f07 100644 --- a/packages/main/src/themes/Card.css +++ b/packages/main/src/themes/Card.css @@ -33,7 +33,7 @@ } .ui5-card-root.ui5-card--nocontent .ui5-card-header-root { - border-bottom: none; + border-bottom: none; } .ui5-card--nocontent ::slotted([ui5-card-header]) { diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css index c262e1fd21db..b48b7e61d488 100644 --- a/packages/main/src/themes/DatePicker.css +++ b/packages/main/src/themes/DatePicker.css @@ -1,5 +1,6 @@ @import "./InvisibleTextStyles.css"; @import "./InputIcon.css"; +@import "./InputSharedStyles.css"; :host(:not([hidden])) { display: inline-block; @@ -18,10 +19,6 @@ margin: var(--_ui5_input_margin_top_bottom) 0; } -:host([value-state="Error"]:not([readonly]):not([disabled])) { - background-color: var(--sapField_InvalidBackground); -} - :host(:not([disabled]):not([readonly]):active) { background: var(--_ui5-datepicker-hover-background); } @@ -53,15 +50,4 @@ :host(:not([disabled]):not([readonly])) .ui5-date-picker-input[focused] { background-color: var(--_ui5-datepicker-hover-background); -} - -:host([readonly]) { - border-color: var(--_ui5_input_readonly_border_color); - background: var(--sapField_ReadOnly_BackgroundStyle); - background-color: var(--_ui5_input_readonly_background); -} - -[slot="icon"] { - border-top-right-radius: var(--_ui5-datepicker_icon_border_radius); - border-bottom-right-radius: var(--_ui5-datepicker_icon_border_radius); -} +} \ No newline at end of file diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css index 882a9692e98c..d1f6718cf428 100644 --- a/packages/main/src/themes/DayPicker.css +++ b/packages/main/src/themes/DayPicker.css @@ -11,17 +11,17 @@ flex-basis: 100%; } -:host([secondary-calendar-type]) .ui5-dp-item { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item { flex-direction: column; justify-content: var(--_ui5_day_picker_item_justify_content); } -:host([secondary-calendar-type]) .ui5-dp-daytext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-daytext { height: 1.575rem; padding-top: var(--_ui5_dp_two_calendar_item_text_padding_top) } -:host([secondary-calendar-type]) .ui5-dp-daysectext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-daysectext { font-size: 0.625rem; height: var(--_ui5_dp_two_calendar_item_secondary_text_height); padding: 0 0.375rem 0.375rem 50%; @@ -271,47 +271,47 @@ /* styles for calendar with two types */ -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected:not(.ui5-dp-item.ui5-dp-item--now) .ui5-dp-daytext::after{ +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected:not(.ui5-dp-item.ui5-dp-item--now) .ui5-dp-daytext::after{ border-width: 0.125rem; } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { height: var(--_ui5_dp_two_calendar_item_primary_text_height); padding-top: var(--_ui5_dp_two_calendar_item_now_text_padding_top); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now .ui5-dp-daysectext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now .ui5-dp-daysectext { height: var(--_ui5_dp_two_calendar_item_secondary_text_height); padding-top: 0; border-radius: var(--_ui5_dp_two_calendar_item_secondary_text_border_radios); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { border-radius: var(--_ui5_daypicker_two_calendar_item_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item:focus::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item:focus::after { inset: var(--_ui5_daypicker_two_calendar_item_no_selected_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_border_focus_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now::after { inset: var(--_ui5_daypicker_two_calendar_item_no_selected_focus_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_no_select_focus_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected:focus::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected:focus::after { border-width: var(--_ui5_daypicker_two_calendar_item_now_selected_border_width); inset: var(--_ui5_daypicker_two_calendar_item_now_selected_border_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_border_focus_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now::after { inset: var(--_ui5_daypicker_two_calendar_item_now_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_selected_now_border_radius_focus); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now.ui5-dp-item--selected.ui5-dp-item--withsecondtype .ui5-dp-daytext:not(.ui5-dp-daysectext)::before { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now.ui5-dp-item--selected.ui5-dp-item--withsecondtype .ui5-dp-daytext:not(.ui5-dp-daysectext)::before { content: var(--_ui5_daypicker_two_calendar_item_now_day_text_content); position: absolute; inset: 0.3125rem; diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 50a2d8246dbc..64c92939a998 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -46,19 +46,31 @@ position: relative; } -:host([state="Error"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_error_state_box_shadow); +.ui5-popup-header-root::before { + content: ""; + position: absolute; + inset-block-start: auto; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; + height: var(--_ui5_dialog_header_state_line_height); + background: var(--sapObjectHeader_BorderColor); +} + +:host([state="Error"]) .ui5-popup-header-root::before { + background: var(--sapErrorBorderColor); } -:host([state="Information"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_information_state_box_shadow); +:host([state="Information"]) .ui5-popup-header-root::before { + background: var(--sapInformationBorderColor); } -:host([state="Success"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_success_state_box_shadow); + +:host([state="Success"]) .ui5-popup-header-root::before { + background: var(--sapSuccessBorderColor); } -:host([state="Warning"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_warning_state_box_shadow); +:host([state="Warning"]) .ui5-popup-header-root::before { + background: var(--sapWarningBorderColor); } .ui5-dialog-value-state-icon { @@ -114,10 +126,14 @@ color: var(--_ui5_dialog_resize_handle_color); } -:host ::slotted([slot="footer"]) { +::slotted([slot="footer"]) { height: var(--_ui5_dialog_footer_height); } -:host ::slotted([slot="footer"][ui5-bar][design="Footer"]) { +::slotted([slot="footer"][ui5-bar][design="Footer"]) { border-top: none; +} + +::slotted([slot="header"][ui5-bar]) { + box-shadow: none; } \ No newline at end of file diff --git a/packages/main/src/themes/GroupHeaderListItem.css b/packages/main/src/themes/GroupHeaderListItem.css index 8a436b99e46a..c14c0d7fd64d 100644 --- a/packages/main/src/themes/GroupHeaderListItem.css +++ b/packages/main/src/themes/GroupHeaderListItem.css @@ -7,7 +7,7 @@ } :host([has-border]) { - border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor); + border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); } .ui5-li-root.ui5-ghli-root { @@ -25,4 +25,5 @@ text-overflow: ellipsis; white-space: nowrap; font-weight: bold; + font-family: var(--sapFontHeaderFamily); } diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 1baec8dd8293..94a3b435b93a 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -386,20 +386,39 @@ padding: var(--_ui5_input_error_warning_icon_padding); } +:host([value-state="Error"][focused]) [input-icon], +:host([value-state="Warning"][focused]) [input-icon]{ + padding: var(--_ui5_input_error_warning_focused_icon_padding); +} + :host([value-state="Information"]) [input-icon] { padding: var(--_ui5_input_information_icon_padding); } +:host([value-state="Information"][focused]) [input-icon] { + padding: var(--_ui5_input_information_focused_icon_padding); +} + :host([value-state="Error"]) ::slotted([input-icon][ui5-icon]), :host([value-state="Error"]) ::slotted([ui5-icon][slot="icon"]), :host([value-state="Warning"]) ::slotted([ui5-icon][slot="icon"]) { padding: var(--_ui5_input_error_warning_custom_icon_padding); } +:host([value-state="Error"][focused]) ::slotted([input-icon][ui5-icon]), +:host([value-state="Error"][focused]) ::slotted([ui5-icon][slot="icon"]), +:host([value-state="Warning"][focused]) ::slotted([ui5-icon][slot="icon"]) { + padding: var(--_ui5_input_error_warning_custom_focused_icon_padding); +} + :host([value-state="Information"]) ::slotted([ui5-icon][slot="icon"]) { padding: var(--_ui5_input_information_custom_icon_padding); } +:host([value-state="Information"][focused]) ::slotted([ui5-icon][slot="icon"]) { + padding: var(--_ui5_input_information_custom_focused_icon_padding); +} + :host([value-state="Error"]) [input-icon]:active, :host([value-state="Error"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_error_icon_box_shadow); diff --git a/packages/main/src/themes/InputSharedStyles.css b/packages/main/src/themes/InputSharedStyles.css new file mode 100644 index 000000000000..217f964790cf --- /dev/null +++ b/packages/main/src/themes/InputSharedStyles.css @@ -0,0 +1,99 @@ +/* + This CSS file enables visual alignment of all input elements: + - value states + - readonly and disabled states +*/ + +:host([readonly]:not([disabled])) { + border-color: var(--_ui5_input_readonly_border_color); + background: var(--sapField_ReadOnly_BackgroundStyle); + background-color: var(--_ui5_input_readonly_background); +} + +:host([disabled]) { + opacity: var(--_ui5_input_disabled_opacity); + cursor: default; + pointer-events: none; + background-color: var(--_ui5-input_disabled_background); + border-color: var(--_ui5_input_disabled_border_color); +} + +:host([value-state="Error"]) [input-icon]:not([pressed]):not(:active):hover { + box-shadow: var(--_ui5_input_error_icon_box_shadow); +} + +:host([value-state="Warning"]) [input-icon]:not([pressed]):not(:active):hover { + box-shadow: var(--_ui5_input_warning_icon_box_shadow); +} + +:host([value-state="Information"]) [input-icon]:not([pressed]):not(:active):hover { + box-shadow: var(--_ui5_input_information_icon_box_shadow); +} + + +:host([value-state="Success"]) [input-icon]:not([pressed]):not(:active):hover { + box-shadow: var(--_ui5_input_success_icon_box_shadow); +} + +:host([value-state="Error"]:not([readonly]):not([disabled])) { + background: var(--sapField_InvalidBackgroundStyle); + background-color: var(--sapField_InvalidBackground); + border-color: var(--_ui5_input_value_state_error_border_color); + box-shadow: var(--sapField_InvalidShadow); +} + +:host([value-state="Warning"]:not([readonly]):not([disabled])) { + background: var(--sapField_WarningBackgroundStyle); + background-color: var(--sapField_WarningBackground); + border-color: var(--_ui5_input_value_state_warning_border_color); + box-shadow: var(--sapField_WarningShadow); +} + +:host([value-state="Success"]:not([readonly]):not([disabled])) { + background: var(--sapField_SuccessBackgroundStyle); + background-color: var(--sapField_SuccessBackground); + border-color: var(--_ui5_input_value_state_success_border_color); + border-width: var(--_ui5_input_value_state_success_border_width); + box-shadow: var(--sapField_SuccessShadow); +} + +:host([value-state="Information"]:not([readonly]):not([disabled])) { + background: var(--sapField_InformationBackgroundStyle); + background-color: var(--sapField_InformationBackground); + border-color: var(--_ui5_input_value_state_information_border_color); + border-width: var(--_ui5_input_information_border_width); + box-shadow: var(--sapField_InformationShadow); +} + +:host([value-state="Error"]) [input-icon]:active, +:host([value-state="Error"]) [input-icon][pressed] { + box-shadow: var(--_ui5_input_error_icon_box_shadow); + color: var(--_ui5_input_icon_error_pressed_color); +} + +:host([value-state="Warning"]) [input-icon]:active, +:host([value-state="Warning"]) [input-icon][pressed] { + box-shadow: var(--_ui5_input_warning_icon_box_shadow); + color: var(--_ui5_input_icon_warning_pressed_color); +} + +:host([value-state="Information"]) [input-icon]:active, +:host([value-state="Information"]) [input-icon][pressed] { + box-shadow: var(--_ui5_input_information_icon_box_shadow); + color: var(--_ui5_input_icon_information_pressed_color); +} + +:host([value-state="Success"]) [input-icon]:active, +:host([value-state="Success"]) [input-icon][pressed] { + box-shadow: var(--_ui5_input_success_icon_box_shadow); + color: var(--_ui5_input_icon_success_pressed_color); +} + +:host([value-state="Error"]) [input-icon], +:host([value-state="Warning"]) [input-icon]{ + padding: var(--_ui5_input_error_warning_icon_padding); +} + +:host([value-state="Information"]) [input-icon] { + padding: var(--_ui5_input_information_icon_padding); +} \ No newline at end of file diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index 8abb23289a39..c0e800d0a41a 100644 --- a/packages/main/src/themes/ListItem.css +++ b/packages/main/src/themes/ListItem.css @@ -115,7 +115,7 @@ } .ui5-li-title { - color: var(--sapTextColor); + color: var(--sapList_TextColor); font-size: var(--_ui5_list_item_title_size); } @@ -143,7 +143,7 @@ .ui5-li-additional-text { margin: 0 0.25rem; color: var(--sapNeutralTextColor); - font-size: 0.875rem; + font-size: var(--sapFontSize); min-width: 3.75rem; text-align: end; } diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css index ef0c7d35ede9..9bfb11b81e5c 100644 --- a/packages/main/src/themes/ListItemBase.css +++ b/packages/main/src/themes/ListItemBase.css @@ -37,7 +37,7 @@ align-items: center; width: 100%; height: 100%; - padding: var(--ui5-listitem-padding); + padding: 0 1rem; box-sizing: border-box; } @@ -50,11 +50,8 @@ content: ""; border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); position: absolute; - border-radius: var(--ui5-listitem-focus-border-radius); - top: var(--ui5-listitem-focus-offset); - right: var(--ui5-listitem-focus-offset); - bottom: var(--ui5-listitem-focus-offset); - left: var(--ui5-listitem-focus-offset); + border-radius: 0; + inset: 0.125rem; pointer-events: none; } @@ -74,8 +71,8 @@ } :host([disabled]) { - opacity: var(--_ui5-listitembase_disabled_opacity); - pointer-events: none; + opacity: var(--_ui5-listitembase_disabled_opacity); + pointer-events: none; } .ui5-li-content { diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css index 13af8bbd9883..588ebb8bdae1 100644 --- a/packages/main/src/themes/MessageStrip.css +++ b/packages/main/src/themes/MessageStrip.css @@ -83,10 +83,8 @@ /** Close button - always in compact mode **/ .ui5-message-strip-close-button { - width: 2rem; - min-width: 2rem; - height: 1.65rem; - min-height: 1.65rem; + height: 1.625rem; + min-height: 1.625rem; position: absolute; top: var(--_ui5_message_strip_close_button_top); inset-inline-end: var(--_ui5_message_strip_close_button_right); diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index b5b2f7f62968..e2265edce965 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -28,6 +28,10 @@ outline: none; box-sizing: border-box; padding-right: var(--_ui5_panel_header_padding_right); + font-family: "72override", var(--sapFontHeaderFamily); + font-size: var(--sapGroup_Title_FontSize); + font-weight: normal; + color: var(--sapGroup_TitleTextColor); } .ui5-panel-header-icon { @@ -81,11 +85,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-family: "72override", var(--sapFontHeaderFamily); - font-size: var(--sapGroup_Title_FontSize); - font-weight: normal; - color: var(--sapGroup_TitleTextColor); - font-weight: normal; } .ui5-panel-content { diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css index ae25baaa570c..714c291d9b55 100644 --- a/packages/main/src/themes/PopupsCommon.css +++ b/packages/main/src/themes/PopupsCommon.css @@ -23,7 +23,6 @@ color: var(--sapPageHeader_TextColor); box-shadow: var(--_ui5_popup_header_shadow); border-bottom: var(--_ui5_popup_header_border); - margin-bottom: 0.125rem; } .ui5-popup-content { diff --git a/packages/main/src/themes/RangeSlider.css b/packages/main/src/themes/RangeSlider.css index 1d05b3629f2a..293eb2ae3085 100644 --- a/packages/main/src/themes/RangeSlider.css +++ b/packages/main/src/themes/RangeSlider.css @@ -8,26 +8,12 @@ background: var(--sapSlider_RangeHandleBackground); } -.ui5-slider-root:active .ui5-slider-handle:active:focus, -.ui5-slider-root:active .ui5-slider-handle:focus { - background: var(--_ui5_range_slider_handle_active_background); -} - -.ui5-slider-root:active .ui5-slider-handle:active:focus [slider-icon], -.ui5-slider-root:active .ui5-slider-handle:focus [slider-icon] { - display: var(--_ui5_range_slider_active_handle_icon_display); -} - :host([range-pressed]) .ui5-slider-root:active .ui5-slider-handle:not(:focus) { background: var(--_ui5_range_slider_handle_active_background); border: var(--_ui5_slider_handle_focus_border); box-shadow: none; } -:host([range-pressed]) .ui5-slider-progress:focus::after { - border: none; -} - :host([range-pressed]) .ui5-slider-handle [slider-icon] { display: var(--_ui5_range_slider_active_handle_icon_display); } diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index dad64d57a650..d640c6427e01 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -13,11 +13,14 @@ margin: 0; padding: 0; background-color: var(--sapButton_Background); - border-radius: var(--_ui5_segmented_btn_outer_border_radius); + border-radius: var(--sapButton_BorderCornerRadius); + box-shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } ::slotted([ui5-segmented-button-item]) { border-radius: var(--_ui5_segmented_btn_inner_border_radius); + border-color: var(--_ui5_segmented_btn_border_color); + background-color: var(--_ui5_segmented_btn_background_color); height: var(--_ui5_button_base_height); min-width: 2.5rem; white-space: nowrap; @@ -28,52 +31,37 @@ ::slotted([ui5-segmented-button-item]:hover) { z-index: 2; + box-shadow: var(--_ui5_segmented_btn_hover_box_shadow); + border-color: var(--sapButton_Hover_BorderColor); + background-color: var(--sapButton_Hover_Background); } ::slotted([ui5-segmented-button-item][pressed]), ::slotted([ui5-segmented-button-item][active]) { - border: 0.0625rem solid var(--sapButton_Selected_BorderColor); + border-color: var(--sapButton_Selected_BorderColor); background-color: var(--sapButton_Selected_Background); color: var(--sapButton_Selected_TextColor); } ::slotted([ui5-segmented-button-item][pressed]:hover) { - border: 0.0625rem solid var(--sapButton_Selected_Hover_BorderColor); + border-color: var(--sapButton_Selected_Hover_BorderColor); background-color: var(--sapButton_Selected_Hover_Background); color: var(--sapButton_Selected_TextColor); } -::slotted([ui5-segmented-button-item]:nth-child(odd)) { - border-inline-end: var(--_ui5_segmented_btn_inner_border_odd_child); - border-inline-start: var(--_ui5_segmented_btn_inner_border_odd_child); -} - -::slotted([ui5-segmented-button-item][pressed]:nth-child(odd)), -::slotted([ui5-segmented-button-item][active]:nth-child(odd)) { - border-inline-end: var(--_ui5_segmented_btn_inner_pressed_border_odd_child); - border-inline-start: var(--_ui5_segmented_btn_inner_pressed_border_odd_child); -} - ::slotted([ui5-segmented-button-item]:last-child) { - border-start-end-radius: var(--_ui5_segmented_btn_border_radius); - border-end-end-radius: var(--_ui5_segmented_btn_border_radius); - border-inline-end: var(--_ui5_segmented_btn_inner_border); -} - -::slotted([ui5-segmented-button-item][pressed]:last-child), -::slotted([ui5-segmented-button-item][active]:last-child) { - border-inline-end: 0.0625rem solid var(--sapButton_Selected_BorderColor); + border-start-end-radius: var(--sapButton_BorderCornerRadius); + border-end-end-radius: var(--sapButton_BorderCornerRadius); } ::slotted([ui5-segmented-button-item]:first-child) { - border-start-start-radius: var(--_ui5_segmented_btn_border_radius); - border-end-start-radius: var(--_ui5_segmented_btn_border_radius); - border-inline-start: var(--_ui5_segmented_btn_inner_border); + border-start-start-radius: var(--sapButton_BorderCornerRadius); + border-end-start-radius: var(--sapButton_BorderCornerRadius); } -::slotted([ui5-segmented-button-item][pressed]:first-child), -::slotted([ui5-segmented-button-item][active]:first-child) { - border-inline-start: 0.0625rem solid var(--sapButton_Selected_BorderColor); +::slotted([ui5-segmented-button-item]:not(:first-child)) { + border-left-width: var(--_ui5_segmented_btn_item_border_left); + border-right-width: var(--_ui5_segmented_btn_item_border_right); } ::slotted([ui5-segmented-button-item][active]:not([active]):hover) { diff --git a/packages/main/src/themes/SliderBase.css b/packages/main/src/themes/SliderBase.css index 6bcc9abd19d7..c3bcb2053b9e 100644 --- a/packages/main/src/themes/SliderBase.css +++ b/packages/main/src/themes/SliderBase.css @@ -100,7 +100,6 @@ background: var(--_ui5_slider_handle_background); border: var(--_ui5_slider_handle_border); border-radius: var(--_ui5_slider_handle_border_radius); - box-shadow: var(--_ui5_slider_handle_box_shadow); margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2); top: var(--_ui5_slider_handle_top); position: absolute; @@ -121,30 +120,24 @@ height: var(--_ui5_slider_handle_icon_size); } +.ui5-slider-root .ui5-slider-handle:focus [slider-icon] { + display: var(--_ui5_range_slider_active_handle_icon_display); +} + .ui5-slider-progress-container:hover ~ .ui5-slider-handle:not(:focus), .ui5-slider-handle:hover { background: var(--_ui5_slider_handle_hover_background); border: var(--_ui5_slider_handle_hover_border); - box-shadow: var(--_ui5_slider_handle_hover_box_shadow); } .ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle, -.ui5-slider-handle:not(:active):focus { +.ui5-slider-handle:focus { outline: var(--_ui5_slider_handle_outline); outline-offset: var(--_ui5_slider_handle_outline_offset); border: var(--_ui5_slider_handle_focus_border); - box-shadow: var(--_ui5_slider_handle_box_shadow_focus); background: var(--_ui5_slider_handle_background_focus); } -.ui5-slider-root:active .ui5-slider-handle:focus, -.ui5-slider-handle:focus:active { - background: var(--_ui5_slider_handle_hover_background); - border: var(--_ui5_slider_handle_active_border); - box-shadow: var(--_ui5_slider_handle_active_box_shadow); - outline: var(--_ui5_slider_handle_active_focused_outline); -} - .ui5-slider-handle.ui5-slider-handle--start:focus, .ui5-slider-handle--end:focus { border: var(--_ui5_slider_handle_focus_border); diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css index 8d243fe03003..19136bcf2b29 100644 --- a/packages/main/src/themes/SplitButton.css +++ b/packages/main/src/themes/SplitButton.css @@ -6,26 +6,36 @@ height: 100%; border-radius: var(--_ui5_button_border_radius); background-color: var(--sapButton_Background); + box-shadow: var(--_ui5_split_button_host_default_box_shadow); +} + +:host([disabled]:not([hidden])) { + pointer-events: none; } :host([design="Positive"]:not([hidden])) { background-color: var(--sapButton_Accept_Background); + box-shadow: var(--_ui5_split_button_host_positive_box_shadow); } :host([design="Negative"]:not([hidden])) { background-color: var(--sapButton_Reject_Background); + box-shadow: var(--_ui5_split_button_host_negative_box_shadow); } :host([design="Attention"]:not([hidden])) { background-color: var(--sapButton_Attention_Background); + box-shadow: var(--_ui5_split_button_host_attention_box_shadow); } :host([design="Emphasized"]:not([hidden])) { background-color: var(--sapButton_Emphasized_Background); + box-shadow: var(--_ui5_split_button_host_emphasized_box_shadow); } :host([design="Transparent"]:not([hidden])) { - background-color: transparent; + background-color: var(--sapButton_Lite_Background); + box-shadow: var(--_ui5_split_button_host_transparent_box_shadow); } :host([design="Transparent"][disabled]:not([hidden])) { @@ -33,7 +43,8 @@ } :host([design="Transparent"]:not([hidden]):not([disabled]):hover) { - background-color: var(--_ui5_split_button_transparent_hover_background); + background-color: var(--_ui5_split_button_host_transparent_hover_background); + box-shadow: var(--_ui5_split_button_host_transparent_hover_box_shadow); } :host([design="Transparent"]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button:not(:hover), @@ -71,8 +82,11 @@ .ui5-split-text-button { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius); + border-width: 0.0625rem; border-right-width: var(--_ui5_split_button_text_button_right_border_width); margin-right: var(--_ui5_split_button_text_button_width); + border-color: var(--_ui5_split_text_button_border_color); + background-color: var(--_ui5_split_text_button_background_color); vertical-align: top; width: inherit; } @@ -80,12 +94,76 @@ .ui5-split-text-button:hover { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius); + background-color: var(--sapButton_Hover_Background); + box-shadow: none; + border: var(--_ui5_split_text_button_hover_border); + border-right: var(--_ui5_split_text_button_hover_border_right); + border-left: var(--_ui5_split_text_button_hover_border_left); +} +.ui5-split-text-button[design="Emphasized"] { + border: var(--_ui5_split_text_button_emphasized_border); + border-width: var(--_ui5_split_text_button_emphasized_border_width); +} +.ui5-split-text-button[design="Emphasized"]:hover { + background-color: var(--sapButton_Emphasized_Hover_Background); + border: var(--_ui5_split_text_button_emphasized_hover_border); + border-right: var(--_ui5_split_text_button_emphasized_hover_border_right); + border-left: var(--_ui5_split_text_button_emphasized_hover_border_left); +} +.ui5-split-text-button[design="Positive"]:hover { + background-color: var(--sapButton_Accept_Hover_Background); + border: var(--_ui5_split_text_button_positive_hover_border); + border-right: var(--_ui5_split_text_button_positive_hover_border_right); + border-left: var(--_ui5_split_text_button_positive_hover_border_left); +} +.ui5-split-text-button[design="Negative"]:hover { + background-color: var(--sapButton_Reject_Hover_Background); + border: var(--_ui5_split_text_button_negative_hover_border); + border-right: var(--_ui5_split_text_button_negative_hover_border_right); + border-left: var(--_ui5_split_text_button_negative_hover_border_left); +} +.ui5-split-text-button[design="Attention"]:hover { + background-color: var(--sapButton_Attention_Hover_Background); + border: var(--_ui5_split_text_button_attention_hover_border); + border-right: var(--_ui5_split_text_button_attention_hover_border_right); + border-left: var(--_ui5_split_text_button_attention_hover_border_left); +} +.ui5-split-text-button[design="Transparent"]:hover { + background-color: var(--_ui5_split_button_transparent_hover_background); + border: var(--_ui5_split_text_button_transparent_hover_border); + border-right: var(--_ui5_split_text_button_transparent_hover_border_right); + border-left: var(--_ui5_split_text_button_transparent_hover_border_left); } .ui5-split-text-button[active] { outline: 0; } +.ui5-split-text-button[active][design="Emphasized"] { + background-color: var(--sapButton_Selected_Background); + color: var(--sapButton_Emphasized_Active_TextColor); +} +.ui5-split-text-button[active][design="Negative"] { + background-color: var(--sapButton_Reject_Selected_Background); + color: var(--sapButton_Reject_Active_TextColor); +} +.ui5-split-text-button[active][design="Positive"] { + background-color: var(--sapButton_Accept_Selected_Background); + color: var(--sapButton_Accept_Active_TextColor); +} +.ui5-split-text-button[active][design="Attention"] { + background-color: var(--sapButton_Attention_Selected_Background); + color: var(--sapButton_Attention_Active_TextColor); +} +.ui5-split-text-button[active][design="Default"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} +.ui5-split-text-button[active][design="Transparent"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} + .ui5-split-arrow-button-wrapper { position: absolute; top: 0; @@ -96,28 +174,41 @@ border-top-left-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); width: 2.25rem; + border-color: var(--_ui5_split_text_button_border_color); + background-color: var(--_ui5_split_text_button_background_color); } -.ui5-split-arrow-button[active][design="Default"], -.ui5-split-arrow-button[active][design="Emphasized"], -.ui5-split-arrow-button[active][design="Transparent"] { - background-color: var(--sapButton_Selected_Background); +.ui5-split-text-button[dir="rtl"]:hover { + border-top-left-radius: var(--_ui5_split_button_hover_border_radius); + border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); + border-left: var(--_ui5_split_text_button_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Negative"] { - background-color: var(--sapButton_Reject_Selected_Background); + +.ui5-split-text-button[design="Emphasized"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_emphasized_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_emphasized_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Positive"] { - background-color: var(--sapButton_Accept_Selected_Background); + +.ui5-split-text-button[design="Positive"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_positive_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_positive_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Attention"] { - background-color: var(--sapButton_Attention_Selected_Background); + +.ui5-split-text-button[design="Negative"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_negative_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_negative_hover_border_right_rtl); } -.ui5-split-text-button[dir="rtl"]:hover { - border-top-left-radius: var(--_ui5_split_button_hover_border_radius); - border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); +.ui5-split-text-button[design="Attention"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_attention_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_attention_hover_border_right_rtl); } +.ui5-split-text-button[design="Transparent"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_transparent_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_transparent_hover_border_right_rtl); +} [dir="rtl"] .ui5-split-arrow-button:hover { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); @@ -127,6 +218,40 @@ .ui5-split-arrow-button:hover { border-top-left-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); + background-color: var(--sapButton_Hover_Background); + box-shadow: none; + border: var(--_ui5_split_arrow_button_hover_border); +} + +.ui5-split-arrow-button[design="Emphasized"]:hover { + background-color: var(--sapButton_Emphasized_Hover_Background); + border: var(--_ui5_split_arrow_button_emphasized_hover_border); + border-left-width: var(--sapButton_BorderWidth); +} + +.ui5-split-arrow-button-wrapper[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"]:hover { + border-left-width: var(--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl); + border-right-width: var(--sapButton_BorderWidth); +} + +.ui5-split-arrow-button[design="Positive"]:hover { + background-color: var(--sapButton_Accept_Hover_Background); + border: var(--_ui5_split_arrow_button_positive_hover_border); +} + +.ui5-split-arrow-button[design="Negative"]:hover { + background-color: var(--sapButton_Reject_Hover_Background); + border: var(--_ui5_split_arrow_button_negative_hover_border); +} + +.ui5-split-arrow-button[design="Attention"]:hover { + background-color: var(--sapButton_Attention_Hover_Background); + border: var(--_ui5_split_arrow_button_attention_hover_border); +} + +.ui5-split-arrow-button[design="Transparent"]:hover { + background-color: var(--_ui5_split_button_transparent_hover_background); + border: var(--_ui5_split_arrow_button_transparent_hover_border); } .ui5-split-arrow-button:before { @@ -142,6 +267,19 @@ border-left-width: 0.0625rem; } +.ui5-split-arrow-button[design="Emphasized"]:before { + content: ""; + position: absolute; + box-sizing: border-box; + pointer-events: none; + left: var(--_ui5_split_button_middle_separator_left); + top: var(--_ui5_split_button_middle_separator_top); + right: 0; + height: var(--_ui5_split_button_middle_separator_height); + border: 0 solid var(--sapButton_TextColor); + border-left-width: 0.0625rem; +} + [dir="rtl"] .ui5-split-arrow-button:before { content: ""; position: absolute; @@ -184,11 +322,15 @@ .ui5-split-text-button[dir="rtl"] { border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0; - border-width: 1px 1px 1px 0; + border-width: var(--sapButton_BorderWidth); margin-right: 0; margin-left: var(--_ui5_split_button_text_button_width); } +.ui5-split-text-button[design="Emphasized"][dir="rtl"] { + border-width: var(--_ui5_split_text_button_emphasized_border_width_rtl); +} + .ui5-split-arrow-button-wrapper[dir="rtl"] { left: 0; right: auto; @@ -222,4 +364,34 @@ border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner); border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer); border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer); +} + +.ui5-split-arrow-button[active][design="Emphasized"] { + background-color: var(--sapButton_Selected_Background); + color: var(--sapButton_Emphasized_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Negative"] { + background-color: var(--sapButton_Reject_Selected_Background); + color: var(--sapButton_Reject_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Positive"] { + background-color: var(--sapButton_Accept_Selected_Background); + color: var(--sapButton_Accept_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Attention"] { + background-color: var(--sapButton_Attention_Selected_Background); + color: var(--sapButton_Attention_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Default"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Transparent"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/StepInput.css b/packages/main/src/themes/StepInput.css index 2f4450563d62..1031e95f550a 100644 --- a/packages/main/src/themes/StepInput.css +++ b/packages/main/src/themes/StepInput.css @@ -1,6 +1,7 @@ @import "./FormComponents.css"; @import "./InvisibleTextStyles.css"; @import "./InputIcon.css"; +@import "./InputSharedStyles.css"; :host(:not([hidden])) { display: inline-block; @@ -31,21 +32,6 @@ box-shadow: none; } -:host([value-state="Success"]:not([readonly]):not([disabled])) { - background-color: var(--sapField_SuccessBackground); -} - -:host([value-state="Error"]:not([readonly]):not([disabled])) { - background-color: var(--sapField_InvalidBackground); -} - -:host([value-state="Information"]:not([readonly]):not([disabled])) { - background-color: var(--sapField_InformationBackground); -} - -:host([value-state="Warning"]:not([readonly]):not([disabled])) { - background-color: var(--sapField_WarningBackground); -} :host(:not([value-state]):not([readonly]):not([disabled]):hover), :host([value-state="None"]:not([readonly]):not([disabled]):hover) { background-color: var(--_ui5_step_input_border_color_hover); @@ -105,7 +91,7 @@ pointer-events: none; border-radius: var(--sapField_BorderCornerRadius); border-style: var(--_ui5_input_error_warning_border_style); - z-index: 3; + z-index: 1; border-width: 0px; } @@ -195,7 +181,7 @@ height: 2rem; height: 100%; background-color: var(--_ui5_step_input_button_background_color); - z-index: 2; + z-index: 0; } :host .ui5-step-icon[focused] { @@ -205,6 +191,7 @@ :host .ui5-step-icon.ui5-step-dec { left: var(--_ui5_step_input_button_left); + z-index: 1; } :host .ui5-step-icon.ui5-step-inc { @@ -236,7 +223,7 @@ left: 0px; outline: none; pointer-events: none; - z-index: 3; + z-index: 1; } :host .ui5-step-input-input[focused] { @@ -266,14 +253,6 @@ margin: 0; } -:host([disabled]) { - opacity: var(--_ui5_input_disabled_opacity); - cursor: default; - pointer-events: none; - background: var(--sapField_ReadOnly_Background); - border-color: var(--sapField_ReadOnly_BorderColor); -} - :host([disabled]) .ui5-step-icon { background-color: var(--_ui5_step_input_disabled_button_background); } diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css index d4c2c4150f20..75b013a31310 100644 --- a/packages/main/src/themes/Suggestions.css +++ b/packages/main/src/themes/Suggestions.css @@ -11,11 +11,6 @@ padding: 0 1rem; } -.ui5-suggestions-popover [ui5-li], -.ui5-suggestions-popover [ui5-li-suggestion-item] { - height: var(--_ui5_list_item_dropdown_base_height); -} - .ui5-suggestions-popover [ui5-li]::part(icon), .ui5-suggestions-popover [ui5-li-suggestion-item]::part(icon) { color: var(--sapList_TextColor); diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 986542778813..08ab32472658 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -337,11 +337,14 @@ color: var(--_ui5_switch_text_active_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; + left: var(--_ui5_switch_text_active_left_alternate); } .ui5-switch-root .ui5-switch-text--off { color: var(--_ui5_switch_text_inactive_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; + left: var(--_ui5_switch_text_inactive_left_alternate); + right: var(--_ui5_switch_text_inactive_right_alternate); } .ui5-switch-root .ui5-switch-no-label-icon-on, diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css index dd2aa81b5b07..87d583dec661 100644 --- a/packages/main/src/themes/TabContainer.css +++ b/packages/main/src/themes/TabContainer.css @@ -6,6 +6,7 @@ :host(:not([hidden])) { display: inline-block; width: 100%; + container-type: inline-size; } .ui5-tc-root { @@ -19,7 +20,6 @@ .ui5-tc__header { position: relative; - padding: 0 1rem; display: flex; align-items: center; background-color: var(--_ui5_tc_header_background); @@ -67,6 +67,11 @@ .ui5-tc__overflow.ui5-tc__overflow--end { padding-inline-start: 0.188rem; + margin-inline-end: 1rem; +} + +.ui5-tc__overflow.ui5-tc__overflow--start { + margin-inline-start: 1rem; } .ui5-tc__overflow[hidden] { @@ -100,7 +105,6 @@ position: relative; display: flex; height: calc(100% - var(--_ui5_tc_header_height)); /* the header height (tabs with icons and text) */ - padding: 1rem 2rem; background-color: var(--_ui5_tc_content_background); border-bottom: var(--_ui5_tc_content_border_bottom); box-sizing: border-box; @@ -138,19 +142,30 @@ } /*** Responsive paddings ***/ - -:host([media-range="S"]) .ui5-tc__header { +.ui5-tc__header { padding: 0; } -:host([media-range="S"]) .ui5-tc__content { +.ui5-tc__content { padding: 1rem; } -:host([media-range="XL"]) .ui5-tc__header { - padding: 0 2rem; +@container (min-width: 600px) { + .ui5-tc__header { + padding: 0 1rem; + } + + .ui5-tc__content { + padding: 1rem 2rem; + } } -:host([media-range="XL"]) .ui5-tc__content { - padding: 1rem 3rem; +@container (min-width: 1440px) { + .ui5-tc__header { + padding: 0 2rem; + } + + .ui5-tc__content { + padding: 1rem 3rem; + } } diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index a9cadd661c6a..08ced3ce499f 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -83,6 +83,7 @@ background: var(--sapTextColor); margin-inline-start: 0.0625rem; z-index: 2; + margin-left: 0.625rem; } .ui5-tab-expand-button:hover { diff --git a/packages/main/src/themes/TableCell.css b/packages/main/src/themes/TableCell.css index 013182ff3801..dfa7271c55a9 100644 --- a/packages/main/src/themes/TableCell.css +++ b/packages/main/src/themes/TableCell.css @@ -4,7 +4,7 @@ font-size: 0.875rem; height: var(--ui5_table_row_height); box-sizing: border-box; - color: var(--sapContent_LabelColor); + color: var(--sapList_TextColor); word-break: break-word; vertical-align: middle; } diff --git a/packages/main/src/themes/TableColumn.css b/packages/main/src/themes/TableColumn.css index 63aa346c9f83..e9eb7eccb079 100644 --- a/packages/main/src/themes/TableColumn.css +++ b/packages/main/src/themes/TableColumn.css @@ -7,6 +7,7 @@ th { width: inherit; font-weight: var(--ui5_table_header_row_font_weight); font-size: var(--sapFontMediumSize); + font-family: var(--ui5_table_header_row_font_family); padding: 0.5rem; box-sizing: border-box; text-align: start; @@ -20,4 +21,5 @@ th { th ::slotted([ui5-label]) { font-weight: var(--ui5_table_header_row_font_weight); font-size: var(--sapFontMediumSize); + font-family: var(--ui5_table_header_row_font_family); } \ No newline at end of file diff --git a/packages/main/src/themes/TimeSelectionInputs.css b/packages/main/src/themes/TimeSelectionInputs.css new file mode 100644 index 000000000000..1c57d1f7b2c8 --- /dev/null +++ b/packages/main/src/themes/TimeSelectionInputs.css @@ -0,0 +1,25 @@ +.ui5-time-selection-numeric-input { + width: 2.875rem; + text-align: center; +} + +.ui5-time-selection-inputs { + min-width: 12.5rem; + display: flex; + justify-content: center; + align-items: center; +} + +span[separator] { + display: inline-block; + min-width: 0.5rem; + padding: 0 0.125rem; + text-align: center; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize); + color: var(--sapTextColor); +} + +.ui5-hidden-text { + display: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/ToggleButton.css b/packages/main/src/themes/ToggleButton.css index 4affd30ba388..ff25fe7addc2 100644 --- a/packages/main/src/themes/ToggleButton.css +++ b/packages/main/src/themes/ToggleButton.css @@ -27,7 +27,6 @@ background: var(--sapButton_Selected_Hover_Background); border-color: var(--sapButton_Selected_Hover_BorderColor); color: var(--sapButton_Selected_TextColor); - box-shadow: var(--sapContent_Interaction_Shadow); } :host([active][focused]), @@ -37,7 +36,6 @@ background: var(--sapButton_Active_Background); border-color: var(--sapButton_Active_BorderColor); color: var(--sapButton_Selected_TextColor); - box-shadow: var(--sapContent_Interaction_Shadow); } :host([pressed]:not([active]):not([non-interactive]):not([_is-touch])), @@ -66,7 +64,6 @@ background: var(--sapButton_Reject_Selected_Hover_Background); border-color: var(--sapButton_Reject_Selected_Hover_BorderColor); color: var(--sapButton_Reject_Selected_TextColor); - box-shadow: var(--sapContent_Negative_Shadow); } :host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) { @@ -92,7 +89,6 @@ background: var(--sapButton_Accept_Selected_Hover_Background); border-color: var(--sapButton_Accept_Selected_Hover_BorderColor); color: var(--sapButton_Accept_Selected_TextColor); - box-shadow: var(--sapContent_Positive_Shadow); } :host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) { @@ -118,7 +114,6 @@ background: var(--sapButton_Attention_Selected_Hover_Background); border-color: var(--sapButton_Attention_Selected_Hover_BorderColor); color: var(--sapButton_Attention_Selected_TextColor); - box-shadow: var(--sapContent_Critical_Shadow); } :host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) { diff --git a/packages/main/src/themes/ToolbarPopover.css b/packages/main/src/themes/ToolbarPopover.css index 8cefd2013b85..df9283b5af39 100644 --- a/packages/main/src/themes/ToolbarPopover.css +++ b/packages/main/src/themes/ToolbarPopover.css @@ -11,6 +11,9 @@ .ui5-tb-popover-item { width: 100%; +} + +.ui5-tb-popover-item:not(:last-child) { margin-bottom: 0.25rem; } diff --git a/packages/main/src/themes/TreeItem.css b/packages/main/src/themes/TreeItem.css index ce80d64033a0..34457497c389 100644 --- a/packages/main/src/themes/TreeItem.css +++ b/packages/main/src/themes/TreeItem.css @@ -4,37 +4,8 @@ position: relative; } -:host([_minimal]) .ui5-li-tree-toggle-box { - width: 0; - min-width: 0; -} - -:host([_minimal]) .ui5-li-icon { - padding: 0; -} - -:host([_minimal]) .ui5-li-content { - justify-content: center; -} - -:host([_minimal]) .ui5-li-root-tree { - padding: 0; -} - -:host([_minimal][show-toggle-button])::after { - display: var(--_ui5-tree-item-minimal-children-indicator-display); - content: ""; - width: 0; - height: 0; - border-left: 0.375rem solid transparent; - border-bottom: .375rem solid var(--sapContent_NonInteractiveIconColor); - position: absolute; - right: 0.1875rem; - bottom: 0.125rem; -} - -:host([_minimal]) .ui5-li-text-wrapper { - display: none; +.ui5-li-tree-text-wrapper { + flex: auto; } .ui5-li-root-tree { @@ -119,10 +90,6 @@ is the .ui5-li-root and not the host. The host height expands to fill subtree */ background: var(--sapList_SelectionBackgroundColor); } -:host([_minimal][selected]) .ui5-li-root { - background: var(--_ui5-tree-item-minimal-background); -} - :host([has-border]) { border-bottom: unset; } diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css index 48dd62044810..5e7361eca151 100644 --- a/packages/main/src/themes/base/Button-parameters.css +++ b/packages/main/src/themes/base/Button-parameters.css @@ -4,7 +4,7 @@ --_ui5_button_focused_inner_border_radius: 0; --_ui5_button_base_min_width: 2.5rem; --_ui5_button_base_min_compact_width: 2rem; - --_ui5_button_base_height: 2.5rem; + --_ui5_button_base_height: var(--sapElement_Height); --_ui5_button_compact_height: 1.625rem; --_ui5_button_border_radius: var(--sapButton_BorderCornerRadius); --_ui5_button_base_padding: 0.6875rem; @@ -12,24 +12,13 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.563rem; --_ui5_button_icon_font_size: 1.375rem; - --_ui5_button_outline: 1px dotted var(--sapContent_FocusColor); --_ui5_button_emphasized_outline: 1px dotted var(--sapContent_FocusColor); - --_ui5_button_outline_offset: calc(-1 * .1875rem); - --_ui5_button_emphasized_font_weight: normal; --_ui5_button_text_shadow: var(--sapContent_TextShadow); --_ui5_button_focus_offset: 1px; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focus_outline_focus_color: var(--sapContent_ContrastFocusColor); --_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor); - - --_ui5_button_positive_border_focus_hover_color: var(--sapContent_FocusColor); - --_ui5_button_positive_focus_border_color: var(--sapButton_Accept_BorderColor); - --_ui5_button_negative_focus_border_color: var(--sapButton_Reject_BorderColor); - --_ui5_button_attention_focus_border_color: var(--sapButton_Negative_BorderColor); + --_ui5_button_fontFamily: var(--sapFontFamily); --_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor); - --_ui5_button_fontFamily: "72override", var(--sapFontFamily); --_ui5_button_emphasized_focused_border_before: none; - --_ui5_button_emphasized_focused_border_radius: 0; - --_ui5_button_transparent_hover: transparent; + --_ui5_button_emphasized_focused_active_border_color: transparent; } diff --git a/packages/main/src/themes/base/Dialog-parameters.css b/packages/main/src/themes/base/Dialog-parameters.css index 72df93515535..db18dff49ea0 100644 --- a/packages/main/src/themes/base/Dialog-parameters.css +++ b/packages/main/src/themes/base/Dialog-parameters.css @@ -7,12 +7,9 @@ --_ui5_dialog_header_focus_left_offset: 2px; --_ui5_dialog_header_focus_right_offset: 2px; --_ui5_dialog_header_border_radius: 0px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow); --_ui5_dialog_header_error_state_icon_color: var(--sapNegativeElementColor); --_ui5_dialog_header_information_state_icon_color: var(--sapInformativeElementColor); --_ui5_dialog_header_success_state_icon_color: var(--sapPositiveElementColor); --_ui5_dialog_header_warning_state_icon_color: var(--sapCriticalElementColor); + --_ui5_dialog_header_state_line_height: 0.0625rem; } diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index 05c450e4daff..7df445341f97 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -31,9 +31,13 @@ --_ui5_input_readonly_background: var(--sapField_ReadOnly_Background); --_ui5_input_custom_icon_padding: .5625rem .625rem; --_ui5_input_error_warning_custom_icon_padding: .5rem .625rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .5rem .625rem; --_ui5_input_information_custom_icon_padding: .5rem .625rem; + --_ui5_input_information_custom_focused_icon_padding: .5rem .625rem; --_ui5_input_error_warning_icon_padding: .5rem .5rem .5rem .5625rem; + --_ui5_input_error_warning_focused_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem; + --_ui5_input_information_focused_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_disabled_opacity: var(--sapContent_DisabledOpacity); --_ui5_input_icon_min_width: 2.25rem; --_ui5_input_compact_min_width: 2rem; @@ -76,4 +80,13 @@ .sapUiSizeCompact { --_ui5_input_min_width: 2rem; --_ui5_input_icon_width: 2rem; + --_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_error_warning_focused_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_information_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_information_focused_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_custom_icon_padding: .25rem .5rem; + --_ui5_input_error_warning_custom_icon_padding: .1875rem .5rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .1875rem .5rem; + --_ui5_input_information_custom_icon_padding: .1875rem .5rem; + --_ui5_input_information_custom_focused_icon_padding: .1875rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/InputIcon-parameters.css b/packages/main/src/themes/base/InputIcon-parameters.css index fec70440099d..0577551e99d9 100644 --- a/packages/main/src/themes/base/InputIcon-parameters.css +++ b/packages/main/src/themes/base/InputIcon-parameters.css @@ -15,5 +15,10 @@ --_ui5_input_icon_warning_pressed_color: var(--sapButton_Active_TextColor); --_ui5_input_icon_information_pressed_color: var(--sapButton_Active_TextColor); --_ui5_input_icon_success_pressed_color: var(--sapButton_Active_TextColor); +} +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_input_icon_padding: .25rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/ListItemBase-parameters.css b/packages/main/src/themes/base/ListItemBase-parameters.css index 352df200163e..1323c8273590 100644 --- a/packages/main/src/themes/base/ListItemBase-parameters.css +++ b/packages/main/src/themes/base/ListItemBase-parameters.css @@ -1,12 +1,9 @@ :root { --ui5-listitem-background-color: var(--sapList_Background); - --ui5-listitem-border-bottom: 1px solid var(--sapList_BorderColor); + --ui5-listitem-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); --ui5-listitem-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor); --ui5-listitem-focused-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor); --ui5-listitem-active-border-color: var(--sapContent_ContrastFocusColor); - --ui5-listitem-padding: 0 1rem; - --ui5-listitem-focus-border-radius: 0; - --ui5-listitem-focus-offset: 0.125rem; --_ui5_listitembase_focus_width: 1px; --_ui5-listitembase_disabled_opacity: 0.5; --_ui5_product_switch_item_border: none; diff --git a/packages/main/src/themes/base/SegmentedButtton-parameters.css b/packages/main/src/themes/base/SegmentedButtton-parameters.css index 6eddd2ffc525..d5bea9caa14f 100644 --- a/packages/main/src/themes/base/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/base/SegmentedButtton-parameters.css @@ -2,8 +2,7 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0; - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; - --_ui5_segmented_btn_outer_border_radius: 0.375rem; - --_ui5_segmented_btn_background_color: transparent; + --_ui5_segmented_btn_item_border_left: 0px; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/SliderBase-parameters.css b/packages/main/src/themes/base/SliderBase-parameters.css index 86c2f0a3b4fd..d3f5ded6b966 100644 --- a/packages/main/src/themes/base/SliderBase-parameters.css +++ b/packages/main/src/themes/base/SliderBase-parameters.css @@ -15,8 +15,6 @@ --_ui5_slider_handle_width: 1.625rem; --_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor); --_ui5_slider_handle_border_radius: 1rem; - --_ui5_slider_handle_box_shadow: none; - --_ui5_slider_handle_box_shadow_focus: none; --_ui5_slider_handle_background: var(--sapButton_Background); --_ui5_range_slider_handle_background: #FFF; --_ui5_slider_handle_top: -0.825rem; @@ -27,14 +25,7 @@ --_ui5_slider_handle_hover_border: 0.125rem solid var(--sapButton_Hover_BorderColor); --_ui5_slider_handle_outline: 0.0625rem dotted var(--sapContent_FocusColor); --_ui5_slider_handle_focus_border: var(--_ui5_slider_handle_hover_border); - --_ui5_slider_handle_active_border: var(--_ui5_slider_handle_hover_border); - --_ui5_slider_handle_focused_top: var(--_ui5_slider_handle_top); - --_ui5_slider_handle_focused_margin_left: var(--_ui5_slider_handle_margin_left); --_ui5_slider_handle_outline_offset: 0.075rem; - --_ui5_slider_icon_left: 0.5rem; - --_ui5_slider_icon_top: 0.125rem; - --_ui5_range_slider_handle_hover_background: rgba(var(--sapButton_Background), 0.25); - --_ui5_range_slider_handle_hover_icon_display: none; --_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor); --_ui5_slider_progress_outline_offset: -0.8125rem; --_ui5_slider_tickmark_top: -0.375rem; @@ -62,9 +53,7 @@ --_ui5_slider_start_end_point_size: .375rem; --_ui5_slider_start_end_point_left: -0.875rem; --_ui5_slider_start_end_point_top: -.1875rem; - --_ui5_slider_handle_hover_box_shadow: none; - --_ui5_slider_handle_background_focus: var(--_ui5_slider_handle_background); - --_ui5_slider_handle_active_box_shadow: none; + --_ui5_slider_handle_background_focus: var(--sapButton_Active_Background); --_ui5_slider_handle_focused_tooltip_distance: var(--_ui5_slider_tooltip_bottom); --_ui5_slider_handle_box_sizing: content-box; --_ui5_slider_tooltip_border_box: content-box; @@ -99,8 +88,6 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_slider_handle_focused_top: -0.625rem; - --_ui5_slider_handle_focused_margin_left: -0.75rem; --_ui5_slider_handle_icon_size: .875rem; --_ui5_slider_padding: 1rem 1.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css index 241b851d378e..97651414dfc5 100644 --- a/packages/main/src/themes/base/SplitButton-parameters.css +++ b/packages/main/src/themes/base/SplitButton-parameters.css @@ -10,8 +10,81 @@ --_ui5_split_button_text_button_width: 2.25rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Background); + --_ui5_split_button_host_transparent_hover_background: transparent; --_ui5_split_button_transparent_hover_color: var(--sapButton_Lite_TextColor); --_ui5_split_button_transparent_disabled_background: transparent; --_ui5_split_button_inner_focused_border_radius_outer: 0.25rem; --_ui5_split_button_inner_focused_border_radius_inner: 0; -} + + --_ui5_split_button_host_default_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); + --_ui5_split_button_host_attention_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Attention_BorderColor); + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Emphasized_BorderColor); + --_ui5_split_button_host_positive_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Accept_BorderColor); + --_ui5_split_button_host_negative_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Reject_BorderColor); + --_ui5_split_button_host_transparent_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Lite_BorderColor); + + --_ui5_split_button_host_transparent_hover_box_shadow: none; + + --_ui5_split_text_button_border_color: transparent; + --_ui5_split_text_button_background_color: transparent; + + + --_ui5_split_text_button_emphasized_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + + + --_ui5_split_text_button_emphasized_border_width: 0.0625rem 0 0.0625rem 0.0625rem; + + + --_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + + --_--_ui5_split_button_text_button_border_width_rtl: 0.0625rem 0.0625rem 0.0625rem 0; + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.0625rem; + + + --_ui5_split_arrow_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_arrow_button_negative_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_arrow_button_attention_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_arrow_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_hover_border_right: none; + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: none; + --_ui5_split_text_button_negative_hover_border_right: none; + --_ui5_split_text_button_attention_hover_border_right: none; + --_ui5_split_text_button_transparent_hover_border_right: none; + + --_ui5_split_text_button_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + + --_ui5_split_text_button_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: var(--sapButton_BorderWidth); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index 5d5c815fa8de..30c9cd874c7a 100644 --- a/packages/main/src/themes/base/Switch-parameters.css +++ b/packages/main/src/themes/base/Switch-parameters.css @@ -116,8 +116,11 @@ --_ui5_switch_text_width: none; --_ui5_switch_text_inactive_left: auto; + --_ui5_switch_text_inactive_left_alternate: auto; --_ui5_switch_text_inactive_right: 0.125rem; + --_ui5_switch_text_inactive_right_alternate: 0.125rem; --_ui5_switch_text_active_left: calc(-100% + 2rem); + --_ui5_switch_text_active_left_alternate: calc(-100% + 2rem); --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Track_Selected_TextColor); diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css index 1958c6f809dc..56c03e56e595 100644 --- a/packages/main/src/themes/base/TabContainer-parameters.css +++ b/packages/main/src/themes/base/TabContainer-parameters.css @@ -19,14 +19,14 @@ --_ui5_tc_headerItem_text_selected_hover_color: var(--sapSelectedColor); --_ui5_tc_headeritem_text_font_weight: normal; --_ui5_tc_headerItem_additional_text_font_weight: normal; - --_ui5_tc_headerItem_neutral_color: var(--sapNeutralColor); - --_ui5_tc_headerItem_positive_color: var(--sapPositiveColor); - --_ui5_tc_headerItem_negative_color: var(--sapNegativeColor); - --_ui5_tc_headerItem_critical_color: var(--sapCriticalColor); - --_ui5_tc_headerItem_neutral_border_color: var(--_ui5_tc_headerItem_neutral_color); - --_ui5_tc_headerItem_positive_border_color: var(--_ui5_tc_headerItem_positive_color); - --_ui5_tc_headerItem_negative_border_color: var(--_ui5_tc_headerItem_negative_color); - --_ui5_tc_headerItem_critical_border_color: var(--_ui5_tc_headerItem_critical_color); + --_ui5_tc_headerItem_neutral_color: var(--sapNeutralTextColor); + --_ui5_tc_headerItem_positive_color: var(--sapPositiveTextColor); + --_ui5_tc_headerItem_negative_color: var(--sapNegativeTextColor); + --_ui5_tc_headerItem_critical_color: var(--sapCriticalTextColor); + --_ui5_tc_headerItem_neutral_border_color: var(--sapNeutralElementColor); + --_ui5_tc_headerItem_positive_border_color: var(--sapPositiveElementColor); + --_ui5_tc_headerItem_negative_border_color: var(--sapNegativeElementColor); + --_ui5_tc_headerItem_critical_border_color: var(--sapCriticalElementColor); --_ui5_tc_headerItem_neutral_selected_border_color: var(--_ui5_tc_headerItem_neutral_color); --_ui5_tc_headerItem_positive_selected_border_color: var(--_ui5_tc_headerItem_positive_color); --_ui5_tc_headerItem_negative_selected_border_color: var(--_ui5_tc_headerItem_negative_color); diff --git a/packages/main/src/themes/base/Table-parameters.css b/packages/main/src/themes/base/Table-parameters.css index 6dc6950f939c..e101bfe6aabf 100644 --- a/packages/main/src/themes/base/Table-parameters.css +++ b/packages/main/src/themes/base/Table-parameters.css @@ -3,6 +3,7 @@ --ui5_table_header_row_outline_width: 1px; --ui5_table_multiselect_column_width: 2.75rem; --ui5_table_header_row_font_weight: normal; + --ui5_table_header_row_font_family: var(--sapFontFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_BorderColor); --ui5_table_header_row_border_width: 1px; --_ui5_table_load_more_border-bottom: none; diff --git a/packages/main/src/themes/base/TreeItem-parameters.css b/packages/main/src/themes/base/TreeItem-parameters.css deleted file mode 100644 index 7641f6494b6a..000000000000 --- a/packages/main/src/themes/base/TreeItem-parameters.css +++ /dev/null @@ -1,4 +0,0 @@ -:root { - --_ui5-tree-item-minimal-background: var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: initial; -} \ No newline at end of file diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 9f4799745e86..c00ddb146c57 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -41,5 +41,21 @@ --_ui5_menu_submenu_placement_type_left_margin_offset: 0 0.25rem; --_ui5-menu_item_icon_float: left; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0px; --_ui5-shellbar-notification-btn-count-offset: auto; + + --_ui5_split_text_button_hover_border_left: none; + --_ui5_split_text_button_emphasized_hover_border_left: none; + --_ui5_split_text_button_positive_hover_border_left: none; + --_ui5_split_text_button_negative_hover_border_left: none; + --_ui5_split_text_button_attention_hover_border_left: none; + --_ui5_split_text_button_transparent_hover_border_left: none; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 581e6f97d6de..733db3cc46f0 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -44,7 +44,6 @@ --_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem; --_ui5_input_inner_space_to_tokenizer: 0.125rem; --_ui5_input_inner_space_to_n_more_text: 0.1875rem; - --_ui5_input_value_state_icon_padding: var(--_ui5-input-icon-padding); --_ui5_list_no_data_height: 3rem; --_ui5_list_item_cb_margin_right: 0; --_ui5_list_item_title_size: var(--sapFontLargeSize); @@ -54,7 +53,7 @@ --_ui5_list_item_img_bottom_margin: 0.5rem; --_ui5_list_item_img_hn_margin: 0.75rem; --_ui5_list_item_dropdown_base_height: 2.5rem; - --_ui5_list_item_base_height: 2.75rem; + --_ui5_list_item_base_height: var(--sapElement_LineHeight); --_ui5_list_item_icon_size: 1.125rem; --_ui5_list_item_icon_padding-inline-end: 0.5rem; --_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding)); @@ -135,9 +134,6 @@ --_ui5_timeline_tli_indicator_before_without_icon_bottom: -1.875rem; --_ui5_timeline_tli_indicator_before_without_icon_right: -1.9375rem; - /* SegmentedButton */ - --_ui5_segmented_btn_border_radius: 0.375rem; - /* SplitButton */ --_ui5_split_button_middle_separator_top: 0; --_ui5_split_button_middle_separator_height: 2.25rem; @@ -154,7 +150,7 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_button_base_height: 1.625rem; + --_ui5_button_base_height: var(--sapElement_Compact_Height); --_ui5_button_base_padding: 0.4375rem; --_ui5_button_base_min_width: 2rem; --_ui5_button_icon_font_size: 1rem; @@ -225,13 +221,6 @@ --_ui5_input_inner_space_to_tokenizer: 0.125rem; --_ui5_input_inner_space_to_n_more_text: 0.125rem; --_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width); - --_ui5_input_icon_padding: .25rem .4375rem; - --_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem; - --_ui5_input_information_icon_padding: .1875rem .375rem .1875rem .4375rem; - --_ui5_input_custom_icon_padding: .25rem .5rem; - --_ui5_input_error_warning_custom_icon_padding: .1875rem .5rem; - --_ui5_input_information_custom_icon_padding: .1875rem .5rem; - --_ui5_input_value_state_icon_padding: .1875rem .5rem; /* Menu */ --_ui5_menu_item_padding: 0 0.75rem 0 0.5rem; diff --git a/packages/main/src/themes/sap_belize/Button-parameters.css b/packages/main/src/themes/sap_belize/Button-parameters.css new file mode 100644 index 000000000000..76665b81c327 --- /dev/null +++ b/packages/main/src/themes/sap_belize/Button-parameters.css @@ -0,0 +1,8 @@ +@import "../base/Button-parameters.css"; + +:root { + --_ui5_button_focused_border_radius: 0rem; + --_ui5_button_text_shadow: none; + --_ui5_button_emphasized_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor); +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize/SliderBase-parameters.css b/packages/main/src/themes/sap_belize/SliderBase-parameters.css index d1c4c74fb855..b7343963111b 100644 --- a/packages/main/src/themes/sap_belize/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_belize/SliderBase-parameters.css @@ -10,7 +10,6 @@ --_ui5_slider_handle_border: solid 0.125rem #999; --_ui5_slider_handle_background: rgba(var(--sapField_Background), 0.1); --_ui5_slider_handle_hover_background: rgba(217,217,217,0.6); - --_ui5_range_slider_handle_hover_background: rgba(217,217,217,0.6); --_ui5_slider_handle_top: -0.8725rem; --_ui5_slider_handle_margin_left: -1rem; --_ui5_slider_tickmark_color: var(--sapField_BorderColor); diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css index 22b6ca623189..f2ab4d7b9082 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -3,7 +3,7 @@ @import "../base/Badge-parameters.css"; @import "./BrowserScrollbar-parameters.css"; @import "../base/BusyIndicator-parameters.css"; -@import "../base/Button-parameters.css"; +@import "./Button-parameters.css"; @import "../base/DatePicker-parameters.css"; @import "./DayPicker-parameters.css"; @import "./Dialog-parameters.css"; diff --git a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css index 331ed931cd51..0966b30072df 100644 --- a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css @@ -3,11 +3,7 @@ :root { --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; - --_ui5_button_positive_focus_border_color: transparent; - --_ui5_button_negative_focus_border_color: transparent; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); } diff --git a/packages/main/src/themes/sap_belize_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_belize_hcb/SliderBase-parameters.css index 9705028c73dd..7051b084b6c0 100644 --- a/packages/main/src/themes/sap_belize_hcb/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/SliderBase-parameters.css @@ -13,6 +13,5 @@ --_ui5_slider_handle_top: -0.5625rem; --_ui5_slider_progress_background: var(--sapField_Background); --_ui5_slider_tickmark_top: -0.2525rem; - --_ui5_slider_handle_active_border: 0.0625rem dotted var(--sapField_BorderColor); --_ui5_range_slider_handle_active_background: transparent; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css index 18295daedf13..42b79a644297 100644 --- a/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css @@ -7,4 +7,7 @@ --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_belize_hcw/Button-parameters.css b/packages/main/src/themes/sap_belize_hcw/Button-parameters.css index 331ed931cd51..0966b30072df 100644 --- a/packages/main/src/themes/sap_belize_hcw/Button-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Button-parameters.css @@ -3,11 +3,7 @@ :root { --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; - --_ui5_button_positive_focus_border_color: transparent; - --_ui5_button_negative_focus_border_color: transparent; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); } diff --git a/packages/main/src/themes/sap_belize_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_belize_hcw/SliderBase-parameters.css index 99f04e970f37..33885caaeae7 100644 --- a/packages/main/src/themes/sap_belize_hcw/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/SliderBase-parameters.css @@ -13,6 +13,5 @@ --_ui5_slider_handle_top: -0.5625rem; --_ui5_slider_progress_background: var(--sapField_Background); --_ui5_slider_tickmark_top: -0.2525rem; - --_ui5_slider_handle_active_border: 0.0625rem dotted var(--sapField_BorderColor); --_ui5_range_slider_handle_active_background: transparent; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css index 18295daedf13..42b79a644297 100644 --- a/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css @@ -7,4 +7,7 @@ --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_fiori_3/Button-parameters.css b/packages/main/src/themes/sap_fiori_3/Button-parameters.css index 1f6a851da372..1aa2e3451e1d 100644 --- a/packages/main/src/themes/sap_fiori_3/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Button-parameters.css @@ -2,14 +2,14 @@ :root { --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); --_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor); --_ui5_button_emphasized_outline: 1px solid var(--sapContent_FocusColor); + --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); + --_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css index bbaa33039c68..2de72d32c18f 100644 --- a/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/SliderBase-parameters.css @@ -2,7 +2,6 @@ :root { --_ui5_slider_inner_min_width: 4rem; - --_ui5_slider_handle_background_focus: var(--sapButton_Background); --_ui5_range_slider_handle_background_focus: transparent; --_ui5_slider_handle_top: -.875rem; --_ui5_range_slider_handle_background: transparent; diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index 2fbcbf527f6b..d6639e081618 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -48,7 +48,6 @@ @import "../base/GrowingButton-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "../base/TreeItem-parameters.css"; @import "../base/ValueStateMessage-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css index 1f6a851da372..1aa2e3451e1d 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css @@ -2,14 +2,14 @@ :root { --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); --_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor); --_ui5_button_emphasized_outline: 1px solid var(--sapContent_FocusColor); + --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); + --_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index 861f94262a6b..018d45ebbb95 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -47,7 +47,6 @@ @import "../base/GrowingButton-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "../base/TreeItem-parameters.css"; @import "../base/ValueStateMessage-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css index d449facfbf30..0966b30072df 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css @@ -4,9 +4,6 @@ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css index 144fb8a12c01..dfb0ce7d1d67 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css @@ -1,8 +1,5 @@ @import "../base/Dialog-parameters.css"; :root { - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css new file mode 100644 index 000000000000..19dd3fe44df2 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css @@ -0,0 +1,5 @@ +@import "../base/PopupsCommon-parameters.css"; + +:root { + --_ui5_popup_header_shadow: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 2dc914ffd49b..adc90c14da9a 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -26,7 +26,7 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popover-parameters.css"; -@import "../base/PopupsCommon-parameters.css"; +@import "./PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "./RadioButton-parameters.css"; @import "../base/RatingIndicator-parameters.css"; @@ -49,7 +49,6 @@ @import "./YearPicker-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "../base/TreeItem-parameters.css"; @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css index d449facfbf30..0966b30072df 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css @@ -4,9 +4,6 @@ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css index 144fb8a12c01..dfb0ce7d1d67 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css @@ -1,8 +1,5 @@ @import "../base/Dialog-parameters.css"; :root { - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css new file mode 100644 index 000000000000..19dd3fe44df2 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css @@ -0,0 +1,5 @@ +@import "../base/PopupsCommon-parameters.css"; + +:root { + --_ui5_popup_header_shadow: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css index 0499686433d7..5e220ca5ff8b 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); -} + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 2dc914ffd49b..adc90c14da9a 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -26,7 +26,7 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popover-parameters.css"; -@import "../base/PopupsCommon-parameters.css"; +@import "./PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "./RadioButton-parameters.css"; @import "../base/RatingIndicator-parameters.css"; @@ -49,7 +49,6 @@ @import "./YearPicker-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "../base/TreeItem-parameters.css"; @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon/Button-parameters.css b/packages/main/src/themes/sap_horizon/Button-parameters.css index 4b444788a4af..e2f8b4ee5285 100644 --- a/packages/main/src/themes/sap_horizon/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon/Button-parameters.css @@ -5,15 +5,13 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css index 4a86dba60bd7..f16fbe99648e 100644 --- a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css @@ -14,10 +14,9 @@ --_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); + --_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_active_background: var(--sapContent_Selected_Hover_Background); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); /* readonly */ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed; /* error state */ diff --git a/packages/main/src/themes/sap_horizon/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon/DayPicker-parameters.css index f4801142ffad..ee37265bbbcf 100644 --- a/packages/main/src/themes/sap_horizon/DayPicker-parameters.css +++ b/packages/main/src/themes/sap_horizon/DayPicker-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_daypicker_item_border_radius: 0.5rem; --_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapContent_FocusColor); + --_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapList_SelectionBorderColor); --_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_width: 0.125rem; diff --git a/packages/main/src/themes/sap_horizon/Input-parameters.css b/packages/main/src/themes/sap_horizon/Input-parameters.css index 2edfd89b4e86..12085851c879 100644 --- a/packages/main/src/themes/sap_horizon/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon/Input-parameters.css @@ -14,9 +14,14 @@ --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; + --_ui5_input_information_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_focus_outline_color: var(--sapField_Active_BorderColor); --_ui5_input_icon_wrapper_height: calc(100% - 1px); --_ui5_input_icon_wrapper_state_height: calc(100% - 2px); @@ -27,6 +32,12 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_error_warning_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_custom_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_error_warning_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_information_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css index 6fcc264581ae..aa272d218433 100644 --- a/packages/main/src/themes/sap_horizon/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon/SliderBase-parameters.css @@ -7,23 +7,17 @@ --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor); - --_ui5_slider_handle_background: var(--sapSlider_RangeHandleBackground); + --_ui5_slider_handle_background: var(--sapSlider_HandleBackground); --_ui5_slider_handle_icon_display: inline-block; --_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor); --_ui5_slider_handle_border_radius: 0.5rem; - --_ui5_slider_handle_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_height: 1.5rem; --_ui5_slider_handle_width: 2rem; --_ui5_slider_handle_top: -0.625rem; - --_ui5_slider_handle_focused_top: -0.688rem; - --_ui5_slider_handle_focused_margin_left: -0.938rem; --_ui5_slider_handle_font_family: "SAP-icons"; --_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor); - --_ui5_slider_handle_hover_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_background_focus: var(--sapSlider_Active_HandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_box_shadow_focus: none; + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_outline: none; --_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground); --_ui5_slider_tooltip_background: var(--sapField_Focus_Background); @@ -33,7 +27,6 @@ --_ui5_range_slider_legacy_progress_focus_display: none; --_ui5_range_slider_progress_focus_display: block; --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor); - --_ui5_slider_handle_active_box_shadow: none; --_ui5_slider_label_fontsize: var(--sapFontSmallSize); --_ui5_slider_label_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_min_width: 2rem; @@ -71,10 +64,6 @@ --_ui5_slider_handle_width: 1.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); - --_ui5_slider_icon_left: 0.125rem; - --_ui5_slider_icon_top: 0; - --_ui5_slider_handle_focused_top: -0.5625rem; - --_ui5_slider_handle_focused_margin_left: -0.6875rem; --_ui5_range_slider_progress_focus_top: -.8125rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); diff --git a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon/StepInput-parameters.css b/packages/main/src/themes/sap_horizon/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index f9364cc20203..21c7fda0d64c 100644 --- a/packages/main/src/themes/sap_horizon/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon/Switch-parameters.css @@ -104,8 +104,11 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0.0625rem; --_ui5_switch_text_inactive_right: auto; + --_ui5_switch_text_inactive_right_alternate: 0; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor); diff --git a/packages/main/src/themes/sap_horizon/Table-parameters.css b/packages/main/src/themes/sap_horizon/Table-parameters.css index e869ef193e08..0422ccd718d9 100644 --- a/packages/main/src/themes/sap_horizon/Table-parameters.css +++ b/packages/main/src/themes/sap_horizon/Table-parameters.css @@ -3,6 +3,7 @@ :root { --ui5_table_header_row_outline_width: var(--sapContent_FocusWidth); --ui5_table_header_row_font_weight: bold; + --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: -0.1875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css index 6e45e94d1d12..264a4d9801b1 100644 --- a/packages/main/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css @@ -50,7 +50,6 @@ @import "../base/TableRow-parameters.css"; @import "./Token-parameters.css"; @import "./Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "./ValueStateMessage-parameters.css"; @@ -62,4 +61,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/rtl-parameters.css b/packages/main/src/themes/sap_horizon/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/Button-parameters.css b/packages/main/src/themes/sap_horizon_dark/Button-parameters.css index 4b444788a4af..689f4d511f19 100644 --- a/packages/main/src/themes/sap_horizon_dark/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Button-parameters.css @@ -5,15 +5,13 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); } diff --git a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css index 755aca223bb6..f55e190b54ea 100644 --- a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css @@ -14,10 +14,9 @@ --_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); + --_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_active_background: var(--sapContent_Selected_Hover_Background); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); /* readonly */ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed; /* error state */ diff --git a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css index 60006362adc5..12085851c879 100644 --- a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css @@ -12,11 +12,16 @@ --_ui5_input_focused_value_state_error_focus_outline_color: var(--sapField_InvalidColor); --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); - --_ui5_input_icon_min_width: 2.125rem; --_ui5_input_focus_offset: 0; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; + --_ui5_input_error_warning_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; + --_ui5_input_information_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_focus_outline_color: var(--sapField_Active_BorderColor); --_ui5_input_icon_wrapper_height: calc(100% - 1px); --_ui5_input_icon_wrapper_state_height: calc(100% - 2px); @@ -27,6 +32,12 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_error_warning_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_custom_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_error_warning_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_information_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css index 6fcc264581ae..aa272d218433 100644 --- a/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SliderBase-parameters.css @@ -7,23 +7,17 @@ --_ui5_slider_progress_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_before_background: var(--sapSlider_Selected_Background); --_ui5_slider_progress_after_background: var(--sapContent_MeasureIndicatorColor); - --_ui5_slider_handle_background: var(--sapSlider_RangeHandleBackground); + --_ui5_slider_handle_background: var(--sapSlider_HandleBackground); --_ui5_slider_handle_icon_display: inline-block; --_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor); --_ui5_slider_handle_border_radius: 0.5rem; - --_ui5_slider_handle_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_height: 1.5rem; --_ui5_slider_handle_width: 2rem; --_ui5_slider_handle_top: -0.625rem; - --_ui5_slider_handle_focused_top: -0.688rem; - --_ui5_slider_handle_focused_margin_left: -0.938rem; --_ui5_slider_handle_font_family: "SAP-icons"; --_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor); - --_ui5_slider_handle_hover_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_background_focus: var(--sapSlider_Active_HandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_box_shadow_focus: none; + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_outline: none; --_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground); --_ui5_slider_tooltip_background: var(--sapField_Focus_Background); @@ -33,7 +27,6 @@ --_ui5_range_slider_legacy_progress_focus_display: none; --_ui5_range_slider_progress_focus_display: block; --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor); - --_ui5_slider_handle_active_box_shadow: none; --_ui5_slider_label_fontsize: var(--sapFontSmallSize); --_ui5_slider_label_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_min_width: 2rem; @@ -71,10 +64,6 @@ --_ui5_slider_handle_width: 1.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); - --_ui5_slider_icon_left: 0.125rem; - --_ui5_slider_icon_top: 0; - --_ui5_slider_handle_focused_top: -0.5625rem; - --_ui5_slider_handle_focused_margin_left: -0.6875rem; --_ui5_range_slider_progress_focus_top: -.8125rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); diff --git a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 900e5c76509e..9e1d2e2287eb 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -103,8 +103,11 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0; --_ui5_switch_text_inactive_right: auto; + --_ui5_switch_text_inactive_right_alternate: 0; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor); @@ -145,4 +148,5 @@ --_ui5_switch_text_font_size: var(--sapFontSize); --_ui5_switch_text_width: 1rem; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/Table-parameters.css b/packages/main/src/themes/sap_horizon_dark/Table-parameters.css index e869ef193e08..0422ccd718d9 100644 --- a/packages/main/src/themes/sap_horizon_dark/Table-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Table-parameters.css @@ -3,6 +3,7 @@ :root { --ui5_table_header_row_outline_width: var(--sapContent_FocusWidth); --ui5_table_header_row_font_weight: bold; + --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: -0.1875rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_dark/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_dark/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css index 8897a981a59d..b891883e37ff 100644 --- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css @@ -50,7 +50,6 @@ @import "../base/TableRow-parameters.css"; @import "./Token-parameters.css"; @import "./Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "./ValueStateMessage-parameters.css"; @@ -61,4 +60,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css index 4b444788a4af..e2f8b4ee5285 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css @@ -5,15 +5,13 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SliderBase-parameters.css index 6fcc264581ae..9359e4bad7da 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/SliderBase-parameters.css @@ -11,19 +11,13 @@ --_ui5_slider_handle_icon_display: inline-block; --_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor); --_ui5_slider_handle_border_radius: 0.5rem; - --_ui5_slider_handle_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_height: 1.5rem; --_ui5_slider_handle_width: 2rem; --_ui5_slider_handle_top: -0.625rem; - --_ui5_slider_handle_focused_top: -0.688rem; - --_ui5_slider_handle_focused_margin_left: -0.938rem; --_ui5_slider_handle_font_family: "SAP-icons"; --_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor); - --_ui5_slider_handle_hover_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_background_focus: var(--sapSlider_Active_HandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_box_shadow_focus: none; + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_outline: none; --_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground); --_ui5_slider_tooltip_background: var(--sapField_Focus_Background); @@ -33,7 +27,6 @@ --_ui5_range_slider_legacy_progress_focus_display: none; --_ui5_range_slider_progress_focus_display: block; --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor); - --_ui5_slider_handle_active_box_shadow: none; --_ui5_slider_label_fontsize: var(--sapFontSmallSize); --_ui5_slider_label_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_min_width: 2rem; @@ -71,10 +64,7 @@ --_ui5_slider_handle_width: 1.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); - --_ui5_slider_icon_left: 0.125rem; - --_ui5_slider_icon_top: 0; --_ui5_slider_handle_focused_top: -0.5625rem; - --_ui5_slider_handle_focused_margin_left: -0.6875rem; --_ui5_range_slider_progress_focus_top: -.8125rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon_dark_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_dark_exp/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css index 8897a981a59d..b891883e37ff 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css @@ -50,7 +50,6 @@ @import "../base/TableRow-parameters.css"; @import "./Token-parameters.css"; @import "./Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "./ValueStateMessage-parameters.css"; @@ -61,4 +60,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_exp/Button-parameters.css index 4b444788a4af..e2f8b4ee5285 100644 --- a/packages/main/src/themes/sap_horizon_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Button-parameters.css @@ -5,15 +5,13 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_horizon_exp/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_exp/DayPicker-parameters.css index f4801142ffad..ee37265bbbcf 100644 --- a/packages/main/src/themes/sap_horizon_exp/DayPicker-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/DayPicker-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_daypicker_item_border_radius: 0.5rem; --_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapContent_FocusColor); + --_ui5_daypicker_item_selected_border: 0.0625rem solid var(--sapList_SelectionBorderColor); --_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_width: 0.125rem; diff --git a/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_exp/SliderBase-parameters.css index 6fcc264581ae..1f39223ccead 100644 --- a/packages/main/src/themes/sap_horizon_exp/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/SliderBase-parameters.css @@ -11,19 +11,13 @@ --_ui5_slider_handle_icon_display: inline-block; --_ui5_slider_handle_border: 0.0625rem solid var(--sapSlider_HandleBorderColor); --_ui5_slider_handle_border_radius: 0.5rem; - --_ui5_slider_handle_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_height: 1.5rem; --_ui5_slider_handle_width: 2rem; --_ui5_slider_handle_top: -0.625rem; - --_ui5_slider_handle_focused_top: -0.688rem; - --_ui5_slider_handle_focused_margin_left: -0.938rem; --_ui5_slider_handle_font_family: "SAP-icons"; --_ui5_slider_handle_hover_border: 0.0625rem solid var(--sapSlider_Hover_HandleBorderColor); - --_ui5_slider_handle_hover_box_shadow: var(--sapContent_Selected_Shadow); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_background_focus: var(--sapSlider_Active_HandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapContent_FocusColor); - --_ui5_slider_handle_box_shadow_focus: none; + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_outline: none; --_ui5_slider_handle_hover_background: var(--sapSlider_Hover_HandleBackground); --_ui5_slider_tooltip_background: var(--sapField_Focus_Background); @@ -33,7 +27,6 @@ --_ui5_range_slider_legacy_progress_focus_display: none; --_ui5_range_slider_progress_focus_display: block; --_ui5_slider_tickmark_in_range_bg: var(--sapSlider_Selected_BorderColor); - --_ui5_slider_handle_active_box_shadow: none; --_ui5_slider_label_fontsize: var(--sapFontSmallSize); --_ui5_slider_label_color: var(--sapContent_LabelColor); --_ui5_slider_tooltip_min_width: 2rem; @@ -71,10 +64,6 @@ --_ui5_slider_handle_width: 1.5rem; --_ui5_range_slider_progress_focus_width: calc(100% + var(--_ui5_slider_handle_width) + 10px); --_ui5_range_slider_progress_focus_height: calc(var(--_ui5_slider_handle_height) + 10px); - --_ui5_slider_icon_left: 0.125rem; - --_ui5_slider_icon_top: 0; - --_ui5_slider_handle_focused_top: -0.5625rem; - --_ui5_slider_handle_focused_margin_left: -0.6875rem; --_ui5_range_slider_progress_focus_top: -.8125rem; --_ui5_slider_tooltip_bottom: 1.75rem; --_ui5_slider_handle_focused_tooltip_distance: calc(var(--_ui5_slider_tooltip_bottom) - var(--_ui5_slider_handle_focus_width)); diff --git a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_exp/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_exp/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css index 71dd171eedae..4478bf9f3a34 100644 --- a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css @@ -50,7 +50,6 @@ @import "../base/TableRow-parameters.css"; @import "./Token-parameters.css"; @import "./Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; @import "./ValueStateMessage-parameters.css"; @@ -61,4 +60,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css index 6cd93d89879e..86d233c27904 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css index 5c3c2d0452d8..a68df893dd86 100644 --- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css @@ -23,7 +23,7 @@ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_inner_error_background_hover: var(--sapField_InvalidBackground); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); diff --git a/packages/main/src/themes/sap_horizon_hcb/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcb/DayPicker-parameters.css index 75b2e44f0c1d..c32ff1288651 100644 --- a/packages/main/src/themes/sap_horizon_hcb/DayPicker-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/DayPicker-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_daypicker_item_border_radius: 0.5rem; --_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor); + --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor); --_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_width: 0.1875rem; diff --git a/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css index d5e638ce1eab..6d05d9d20bb7 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css @@ -3,8 +3,5 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css index 37ba441edf26..3a462795fbe8 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css @@ -14,7 +14,7 @@ --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; --_ui5_input_icon_padding: 0.65rem 0.75rem; - --_ui5_input_information_icon_padding: .5625rem; + --_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_placeholder_style: normal; --_ui5-input_error_placeholder_color: var(--sapField_TextColor); --_ui5_input_custom_icon_padding: .5rem .625rem; @@ -28,5 +28,4 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_custom_icon_padding: .1875rem .5rem; - --_ui5_input_information_icon_padding: .25rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css index 0638f4902703..2ed254a36a18 100644 --- a/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css @@ -7,5 +7,5 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_input_icon_padding: .25rem .375rem .125rem .4375rem; + --_ui5_input_icon_padding: .1875rem .375rem .1875rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css index 538539ccc4ca..be3754497b89 100644 --- a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css @@ -3,4 +3,5 @@ :root { --_ui5_popup_header_font_family: var(--sapFontHeaderFamily); --_ui5_popup_border_radius: 0.5rem; + --_ui5_popup_header_shadow: none; } diff --git a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css index 1fb1bcabf884..ed7c07204790 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SliderBase-parameters.css @@ -11,14 +11,13 @@ --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border); --_ui5_slider_handle_top: -.5625rem; - --_ui5_slider_handle_background_focus: var(--sapSlider_HandleBackground); + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: none; --_ui5_slider_handle_box_sizing: border-box; --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); --_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background); --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_inner_height: 0.25rem; --_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); --_ui5_slider_progress_border_radius: 0.375rem; diff --git a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css index 17955ea429bf..65ec9d460d15 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css @@ -123,8 +123,10 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0.0625rem; --_ui5_switch_text_inactive_right: auto; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_compact_active_left: 0.1875rem; --_ui5_switch_text_active_right: auto; diff --git a/packages/main/src/themes/sap_horizon_hcb/Table-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Table-parameters.css index e9421152188e..0a7f59ba0f1a 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Table-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Table-parameters.css @@ -3,6 +3,7 @@ :root { --ui5_table_header_row_outline_width: 0.125rem; --ui5_table_header_row_font_weight: bold; + --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: -0.1875rem; --ui5_table_header_row_border_width: 0.1875rem; diff --git a/packages/main/src/themes/sap_horizon_hcb/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_hcb/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css index 23927b95e3b5..1f2eac54b908 100644 --- a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css @@ -48,7 +48,6 @@ @import "./YearPicker-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css index 6cd93d89879e..86d233c27904 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css index 75b2e44f0c1d..c32ff1288651 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/DayPicker-parameters.css @@ -3,7 +3,7 @@ :root { --_ui5_daypicker_item_border_radius: 0.5rem; --_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor); + --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor); --_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_width: 0.1875rem; diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css index d5e638ce1eab..e46e4a8771f9 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css @@ -3,8 +3,4 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SliderBase-parameters.css index 1fb1bcabf884..ed7c07204790 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/SliderBase-parameters.css @@ -11,14 +11,13 @@ --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border); --_ui5_slider_handle_top: -.5625rem; - --_ui5_slider_handle_background_focus: var(--sapSlider_HandleBackground); + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: none; --_ui5_slider_handle_box_sizing: border-box; --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); --_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background); --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_inner_height: 0.25rem; --_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); --_ui5_slider_progress_border_radius: 0.375rem; diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_hcb_exp/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css index 23927b95e3b5..1f2eac54b908 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/parameters-bundle.css @@ -48,7 +48,6 @@ @import "./YearPicker-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css index 27546ae24dff..94b4cd319e8f 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css index 5c3c2d0452d8..a68df893dd86 100644 --- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css @@ -23,7 +23,7 @@ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_inner_error_background_hover: var(--sapField_InvalidBackground); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); diff --git a/packages/main/src/themes/sap_horizon_hcw/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcw/DayPicker-parameters.css index d09cb82711a4..0a9106828c3e 100644 --- a/packages/main/src/themes/sap_horizon_hcw/DayPicker-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/DayPicker-parameters.css @@ -5,7 +5,7 @@ --_ui5_daypicker_item_border_radius_item: 0.5rem; --_ui5_daypicker_item_border_radius: 0.5rem; --_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor); + --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor); --_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_width: 0.1875rem; diff --git a/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css index d5e638ce1eab..6d05d9d20bb7 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css @@ -3,8 +3,5 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css index 37ba441edf26..3a462795fbe8 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css @@ -14,7 +14,7 @@ --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; --_ui5_input_icon_padding: 0.65rem 0.75rem; - --_ui5_input_information_icon_padding: .5625rem; + --_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_placeholder_style: normal; --_ui5-input_error_placeholder_color: var(--sapField_TextColor); --_ui5_input_custom_icon_padding: .5rem .625rem; @@ -28,5 +28,4 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_custom_icon_padding: .1875rem .5rem; - --_ui5_input_information_icon_padding: .25rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css index 0638f4902703..2ed254a36a18 100644 --- a/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css @@ -7,5 +7,5 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_input_icon_padding: .25rem .375rem .125rem .4375rem; + --_ui5_input_icon_padding: .1875rem .375rem .1875rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css index 538539ccc4ca..be3754497b89 100644 --- a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css @@ -3,4 +3,5 @@ :root { --_ui5_popup_header_font_family: var(--sapFontHeaderFamily); --_ui5_popup_border_radius: 0.5rem; + --_ui5_popup_header_shadow: none; } diff --git a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css index 8dead420c5d0..fbd6faa2fa83 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SliderBase-parameters.css @@ -11,14 +11,13 @@ --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border); --_ui5_slider_handle_top: -.5625rem; - --_ui5_slider_handle_background_focus: var(--sapSlider_HandleBackground); + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor); --_ui5_slider_handle_box_sizing: border-box; --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); --_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background); --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_inner_height: 0.25rem; --_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); --_ui5_slider_progress_border_radius: 0.375rem; @@ -30,7 +29,6 @@ --_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor); --_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); --_ui5_slider_start_end_point_top: -3px; - --_ui5_slider_handle_active_focused_outline: none; --_ui5_slider_progress_outline_offset: -14px; --_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px); --_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px); diff --git a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index c724cf6383c1..75997d7e0d93 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -104,8 +104,10 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0.0625rem; --_ui5_switch_text_inactive_right: auto; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor); @@ -146,4 +148,5 @@ --_ui5_switch_text_font_size: var(--sapFontSize); --_ui5_switch_text_width: 1rem; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Table-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Table-parameters.css index e9421152188e..0a7f59ba0f1a 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Table-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Table-parameters.css @@ -3,6 +3,7 @@ :root { --ui5_table_header_row_outline_width: 0.125rem; --ui5_table_header_row_font_weight: bold; + --ui5_table_header_row_font_family: var(--sapFontSemiboldDuplexFamily); --ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor); --ui5_table_focus_outline_offset: -0.1875rem; --ui5_table_header_row_border_width: 0.1875rem; diff --git a/packages/main/src/themes/sap_horizon_hcw/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcw/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_hcw/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css index 417d4eba47fe..0cc5c2d90321 100644 --- a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css @@ -48,7 +48,6 @@ @import "./YearPicker-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css index 27546ae24dff..94b4cd319e8f 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css index d09cb82711a4..0a9106828c3e 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/DayPicker-parameters.css @@ -5,7 +5,7 @@ --_ui5_daypicker_item_border_radius_item: 0.5rem; --_ui5_daypicker_item_border_radius: 0.5rem; --_ui5_daypicker_item_focus_border: 0.0625rem dotted var(--sapContent_FocusColor); - --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapContent_FocusColor); + --_ui5_daypicker_item_selected_border: 0.125rem solid var(--sapList_SelectionBorderColor); --_ui5_daypicker_item_not_selected_focus_border: 0.125rem solid var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_color: var(--sapContent_FocusColor); --_ui5_daypicker_item_selected_focus_width: 0.1875rem; diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css index d5e638ce1eab..e46e4a8771f9 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css @@ -3,8 +3,4 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SliderBase-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SliderBase-parameters.css index 8dead420c5d0..fbd6faa2fa83 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/SliderBase-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/SliderBase-parameters.css @@ -11,14 +11,13 @@ --_ui5_slider_handle_border: 0.0625rem solid var(--sapField_BorderColor); --_ui5_slider_handle_hover_border: var(--_ui5_slider_handle_border); --_ui5_slider_handle_top: -.5625rem; - --_ui5_slider_handle_background_focus: var(--sapSlider_HandleBackground); + --_ui5_slider_handle_background_focus: var(--sapSlider_Active_RangeHandleBackground); --_ui5_slider_handle_focus_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_handle_outline: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor); --_ui5_slider_handle_box_sizing: border-box; --_ui5_range_slider_handle_background: var(--sapSlider_RangeHandleBackground); --_ui5_range_slider_root_hover_handle_bg: var(--sapButton_Hover_Background); --_ui5_range_slider_handle_active_background: var(--sapSlider_Active_RangeHandleBackground); - --_ui5_slider_handle_active_border: 0.125rem solid var(--sapField_BorderColor); --_ui5_slider_inner_height: 0.25rem; --_ui5_slider_progress_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); --_ui5_slider_progress_border_radius: 0.375rem; @@ -30,7 +29,6 @@ --_ui5_slider_progress_after_border: solid 0.0625rem var(--sapContent_Selected_MeasureIndicatorColor); --_ui5_slider_progress_before_border: solid 0.0625rem var(--sapContent_MeasureIndicatorColor); --_ui5_slider_start_end_point_top: -3px; - --_ui5_slider_handle_active_focused_outline: none; --_ui5_slider_progress_outline_offset: -14px; --_ui5_slider_outer_height: calc(var(--_ui5_slider_handle_height) + 9px); --_ui5_slider_progress_outline_offset_left: calc(-1 * (var(--_ui5_slider_handle_width) / 2) - 6px); diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/TreeItem-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/TreeItem-parameters.css deleted file mode 100644 index 147c9aad67de..000000000000 --- a/packages/main/src/themes/sap_horizon_hcw_exp/TreeItem-parameters.css +++ /dev/null @@ -1,6 +0,0 @@ -@import "../base/TreeItem-parameters.css"; - -:root { - --_ui5-tree-item-minimal-background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); - --_ui5-tree-item-minimal-children-indicator-display: none; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css index 417d4eba47fe..0cc5c2d90321 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/parameters-bundle.css @@ -48,7 +48,6 @@ @import "./YearPicker-parameters.css"; @import "./Token-parameters.css"; @import "../base/Tokenizer-parameters.css"; -@import "./TreeItem-parameters.css"; @import "./ValueStateMessage-parameters.css"; @import "../base/MultiComboBox-parameters.css"; @import "./SliderBase-parameters.css"; diff --git a/packages/main/test/pages/Breadcrumbs.html b/packages/main/test/pages/Breadcrumbs.html index 5da79bb6a46c..dfb01013890f 100644 --- a/packages/main/test/pages/Breadcrumbs.html +++ b/packages/main/test/pages/Breadcrumbs.html @@ -125,7 +125,7 @@

        Breadcrumbs with overflowing links

        Link4 Link5 Link6 - aaaaa + aa Location
      @@ -157,6 +157,13 @@

      Empty Breadcrumbs with Location only

      Last pressed link: +

      Breadcrumbs with hardcoded width

      + + + (all) + Bourgogne-Franche-Comté + + - - diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html index 26581eb963dd..62c0b647b409 100644 --- a/packages/main/test/pages/DatePicker.html +++ b/packages/main/test/pages/DatePicker.html @@ -5,17 +5,8 @@ DatePicker test page - - - - - @@ -191,12 +181,13 @@

      DatePicker with format `yyyy` should open picker on years

      labelLiveChangePrevent.innerHTML = 'input: ' + JSON.stringify(e.detail); }); - $('#ui5-datepicker--startDate').on('ui5-input change', (function(e) { - var dp = $('#ui5-datepicker--startDate')[0]; + function datePickerInputChangeHandler(e) { + var dp = e.currentTarget; dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error'); - $('#startDate').val($('#ui5-datepicker--startDate').val()); - $('#startDate').trigger('change'); - })); + } + + document.getElementById('ui5-datepicker--startDate').addEventListener('ui5-input change', datePickerInputChangeHandler); + document.getElementById('ui5-datepicker--startDate').addEventListener('change', datePickerInputChangeHandler); var dp11 = document.getElementById('dp11'); diff --git a/packages/main/test/pages/DayPicker.html b/packages/main/test/pages/DayPicker.html index 03198b255d59..2c56498a3969 100644 --- a/packages/main/test/pages/DayPicker.html +++ b/packages/main/test/pages/DayPicker.html @@ -4,19 +4,8 @@ - - - - - - - - - - - diff --git a/packages/main/test/pages/Icon_and_theming.html b/packages/main/test/pages/Icon_and_theming.html index bb26e43f486c..26d6546c4d77 100644 --- a/packages/main/test/pages/Icon_and_theming.html +++ b/packages/main/test/pages/Icon_and_theming.html @@ -9,7 +9,7 @@ - Horizon + Quartz
      SAPIcons auto ("home")
      @@ -26,7 +26,7 @@
      TNTIcons auto ("tnt/actor" and "SAP-icons-TNT/actor")
      - +
      TNTIcons V2 ("tnt-v2/actor")
      @@ -36,13 +36,13 @@

      BS Icons auto - single version ("business-suite/add-polygon")
      - +
      BS Icons auto - multiple different icon examples
      - +
      BS Icons - V1 ("business-suite-v1/add-polygon")
      @@ -60,12 +60,19 @@ - + +
      New icons since 5.06 and 4.18
      + + + +
      New icons since 5.07 and 4.19
      + + diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html index c359a9bfd62f..96d634424b64 100644 --- a/packages/main/test/pages/Input.html +++ b/packages/main/test/pages/Input.html @@ -423,6 +423,12 @@

      Input with openPicker() on focusin

      No recent users +

      Input - showing wrapping

      + + + + +

      Input - change event handling

      diff --git a/packages/main/test/pages/List_test_page.html b/packages/main/test/pages/List_test_page.html index d01e3676650e..bfb1097c3646 100644 --- a/packages/main/test/pages/List_test_page.html +++ b/packages/main/test/pages/List_test_page.html @@ -83,6 +83,8 @@ Argentina + + Argentina @@ -424,5 +426,16 @@

      Test aria

      ariaPosinset: 3, }; + + + + + + + + + + +
      diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html index a292ed2e62ae..03f8b9e3fbf8 100644 --- a/packages/main/test/pages/MultiComboBox.html +++ b/packages/main/test/pages/MultiComboBox.html @@ -304,7 +304,6 @@ SelectionChange events emitted:
      -
      MultiComboBox with Truncated token @@ -333,6 +332,13 @@ +
      + MultiComboBox with N-More and show wrapping +
      + + + > +
      diff --git a/packages/main/test/pages/MultiInput.html b/packages/main/test/pages/MultiInput.html index 79c03884d81a..05653b4b1d45 100644 --- a/packages/main/test/pages/MultiInput.html +++ b/packages/main/test/pages/MultiInput.html @@ -97,6 +97,11 @@

      Multi Input with 11 tokens (overflowing) and

      +

      Multi Input show wrapping

      + + + +
    @@ -286,6 +291,17 @@

    Tokens + Suggestions

    +
    +

    Suggestions + showing wrapping

    + + + + + + + +
    +

    Create tokens on change and on paste

    diff --git a/packages/main/test/pages/OpenUI5-second.html b/packages/main/test/pages/OpenUI5-second.html index 79a37dec8055..702f5c910519 100644 --- a/packages/main/test/pages/OpenUI5-second.html +++ b/packages/main/test/pages/OpenUI5-second.html @@ -11,7 +11,6 @@ diff --git a/packages/main/test/pages/Panel.html b/packages/main/test/pages/Panel.html index 14f97453f0fe..19234f58472e 100644 --- a/packages/main/test/pages/Panel.html +++ b/packages/main/test/pages/Panel.html @@ -88,7 +88,7 @@
    - + diff --git a/packages/main/test/pages/RatingIndicator.html b/packages/main/test/pages/RatingIndicator.html index cd29364b42ef..9fb1a77f1782 100644 --- a/packages/main/test/pages/RatingIndicator.html +++ b/packages/main/test/pages/RatingIndicator.html @@ -63,7 +63,7 @@

    disabled


    RatingIndicator with title

    - +


    diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 826f6f06d38f..76233622464d 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -24,6 +24,63 @@

    ui5-segmented-button

    Segmentedbutton example

    + Default button +
    +
    + + First + Second + +
    +
    + + First + Second + Third + +
    +
    + + First + Second + Third + Fourth + +
    +
    + + First + Second + Third + Fourth + Fifth + +
    +
    + + First + Second + Third + Fourth + Fifth + Sixth + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    Item diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html index 7ce1db063b91..b7f007758529 100644 --- a/packages/main/test/pages/TextArea.html +++ b/packages/main/test/pages/TextArea.html @@ -123,7 +123,7 @@
    Text Area: max length 20 characters - +
    diff --git a/packages/main/test/pages/TimePickerClock.html b/packages/main/test/pages/TimePickerClock.html index 41f62883048f..1db378d50a78 100644 --- a/packages/main/test/pages/TimePickerClock.html +++ b/packages/main/test/pages/TimePickerClock.html @@ -33,10 +33,7 @@

    TimePickerClock

    - -
    -
    - +
    @@ -68,7 +65,6 @@

    final 'change' event count

    var eventCount = 0; myHours12.addEventListener('ui5-change', displayChange); - myHours00.addEventListener('ui5-change', displayChange); myHours24.addEventListener('ui5-change', displayChange); myMinutes.addEventListener('ui5-change', displayChange); myMinutes10.addEventListener('ui5-change', displayChange); diff --git a/packages/main/test/pages/TimeSelectionInputs.html b/packages/main/test/pages/TimeSelectionInputs.html new file mode 100644 index 000000000000..919d8cb66e2c --- /dev/null +++ b/packages/main/test/pages/TimeSelectionInputs.html @@ -0,0 +1,87 @@ + + + + + + TimeSelectionInputs test page + + + + + + + + + + +

    TimeSelectionInput with pattern "hh:mm:ss"

    + +
    + +
    + +
    +

    'change' event count

    + +
    + +

    TimeSelectionInput with pattern "HH:mm:ss"

    + +
    + +
    + +
    +

    'change' event count

    + +
    + +

    TimeSelectionInput with pattern "hh:mm:ss a"

    + +
    + +
    + +
    +

    'change' event count

    + +
    + + + + + diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html index 64f50a04c9e8..806a7bfae09b 100644 --- a/packages/main/test/pages/Toolbar.html +++ b/packages/main/test/pages/Toolbar.html @@ -267,7 +267,7 @@ }); select.addEventListener("ui5-change", e => { - console.log("Selected " + e.detail.selectedOption.getAttribute("text")); + console.log("Selected " + e.detail.selectedOption.textContent); }); select.addEventListener("ui5-open", e => { diff --git a/packages/main/test/pages/WheelSlider_Test_Page.html b/packages/main/test/pages/WheelSlider_Test_Page.html index 4228f70cbf38..a03b888947e0 100644 --- a/packages/main/test/pages/WheelSlider_Test_Page.html +++ b/packages/main/test/pages/WheelSlider_Test_Page.html @@ -1,24 +1,15 @@ - - - - - - - - - - - + + + + - + + - - + + + \ No newline at end of file diff --git a/packages/main/test/pages/styles/Card.css b/packages/main/test/pages/styles/Card.css index fc4af941bb3d..cc7647644a94 100644 --- a/packages/main/test/pages/styles/Card.css +++ b/packages/main/test/pages/styles/Card.css @@ -25,3 +25,7 @@ .myCardHeader--ar-he-ch::part(title) { font-weight: 700; } + +[ui5-card] [ui5-list]:last-child { + margin-block-end: 0.75rem; +} \ No newline at end of file diff --git a/packages/main/test/pages/styles/Carousel.css b/packages/main/test/pages/styles/Carousel.css index 99d021d72e4c..125a5faefe30 100644 --- a/packages/main/test/pages/styles/Carousel.css +++ b/packages/main/test/pages/styles/Carousel.css @@ -7,6 +7,10 @@ ui5-carousel { height: 100%; } +[ui5-card] [ui5-list]:last-child { + margin-block-end: 0.75rem; +} + .carousel1auto { background-color: var(--sapBackgroundColor); padding: 1rem; diff --git a/packages/main/test/pages/styles/Panel.css b/packages/main/test/pages/styles/Panel.css index 826ca9890d09..8db2d2f161b8 100644 --- a/packages/main/test/pages/styles/Panel.css +++ b/packages/main/test/pages/styles/Panel.css @@ -11,3 +11,7 @@ #panel-stickyHeader::part(content) { max-height: 70px; } + +#panel-expandable::part(header) { + color: green; +} \ No newline at end of file diff --git a/packages/main/test/specs/Avatar.spec.js b/packages/main/test/specs/Avatar.spec.js index 859b0cbc0a41..45125ac60a65 100644 --- a/packages/main/test/specs/Avatar.spec.js +++ b/packages/main/test/specs/Avatar.spec.js @@ -134,8 +134,12 @@ describe("ARIA attributes", () => { it ("role set correctly", async () => { const avatar = await $("#myInteractiveAvatar");; const avatarRoot = await avatar.shadow$(".ui5-avatar-root"); + const nonInteractiveAvatar = await $("#non-interactive-avatar");; + const nonInteractiveavatarRoot = await nonInteractiveAvatar.shadow$(".ui5-avatar-root"); assert.strictEqual(await avatarRoot.getAttribute("role"), "button", "should have role button for interactive avatar"); + + assert.strictEqual(await nonInteractiveavatarRoot.getAttribute("role"), "img", "should have role img for non-interactive avatar"); }); it ("aria-haspopup is correct for interactive avatar", async () => { diff --git a/packages/main/test/specs/Breadcrumbs.spec.js b/packages/main/test/specs/Breadcrumbs.spec.js index 680227a8f0f6..bc4a8d8c3703 100644 --- a/packages/main/test/specs/Breadcrumbs.spec.js +++ b/packages/main/test/specs/Breadcrumbs.spec.js @@ -354,4 +354,12 @@ describe("Breadcrumbs general interaction", () => { assert.strictEqual(await eventResult.getText(), 'CTRL:' + await link.getText(), "label for pressed link is correct"); }); + it("Doesn't go in an endless rerendering cycle, when width is just enough", async () => { + const breadcrumbs = await browser.$("#breadcrumbsWithStyleWidth"); + + await breadcrumbs.setAttribute("style", "width: 191px"); + + assert.strictEqual(await breadcrumbs.getProperty("_overflowSize"), 1, "Max stack of calling not hit for invalidation of control"); + }); + }); diff --git a/packages/main/test/specs/Calendar.spec.js b/packages/main/test/specs/Calendar.spec.js index a64b3a0097d0..bb5092782e82 100644 --- a/packages/main/test/specs/Calendar.spec.js +++ b/packages/main/test/specs/Calendar.spec.js @@ -362,7 +362,7 @@ describe("Calendar general interaction", () => { }); it("Min and max dates are set without format-pattern by using ISO (YYYY-MM-dd) format", async () => { - await browser.url("test/pages/Calendar.html"); + await browser.url(`test/pages/Calendar.html`); const calendar = await browser.$("#calendar6"); await calendar.setAttribute("max-date", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]); // sets the max date to 2024-10-04 @@ -382,8 +382,6 @@ describe("Calendar general interaction", () => { await browser.url("test/pages/Calendar.html"); const calendar = await browser.$("#calendar1"); - const nextButton = await calendar.shadow$("ui5-calendar-header").shadow$("[data-ui5-cal-header-btn-next]"); - const prevButton = await calendar.shadow$("ui5-calendar-header").shadow$("[data-ui5-cal-header-btn-prev]"); const yearButton = await calendar.shadow$("ui5-calendar-header").shadow$(`div[data-ui5-cal-header-btn-year]`); // setting the min and max dates both to a valid format date, but not in the valid ISO format. await calendar.setAttribute("max-date", `${new Date(Date.UTC(2024, 9, 4, 0, 0, 0))}`); @@ -405,4 +403,32 @@ describe("Calendar general interaction", () => { assert.strictEqual(await year2024.hasClass("ui5-yp-item--disabled"), false, "Year 2024 is not disabled"); }); + + it("Apply secondaryCalendar class when primary and secondary calendar types are different", async () => { + await browser.url("test/pages/Calendar.html"); + + const calendar = await browser.$("#calendar5"); + const dayPickerRoot = await calendar.shadow$("ui5-daypicker").shadow$(".ui5-dp-root"); + + assert.strictEqual(await dayPickerRoot.hasClass("ui5-dp-twocalendartypes"), true, "Secondary Calendar class is applied correctly"); + }); + + it("Apply secondaryCalendar class when primary and secondary calendar types are the same", async () => { + await browser.url("test/pages/Calendar.html"); + + const calendar = await browser.$("#calendar7"); + const dayPickerRoot = await calendar.shadow$("ui5-daypicker").shadow$(".ui5-dp-root"); + + assert.strictEqual(await dayPickerRoot.hasClass("ui5-dp-twocalendartypes"), false, "Secondary Calendar class is applied correctly"); + }); + + it("Focus goes into the selected day item of the day picker", async () => { + await browser.url(`test/pages/Calendar.html`); + + const calendar = await browser.$("#calendar4"); + const dayPicker = await calendar.shadow$("ui5-daypicker"); + const currentDayItem = await dayPicker.shadow$(`div[data-sap-timestamp="1594166400"]`); + + assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused"); + }); }); diff --git a/packages/main/test/specs/ColorPicker.spec.js b/packages/main/test/specs/ColorPicker.spec.js index a6435ceb000e..978031e96173 100644 --- a/packages/main/test/specs/ColorPicker.spec.js +++ b/packages/main/test/specs/ColorPicker.spec.js @@ -77,7 +77,7 @@ describe("Color Picker general interaction", () => { await hueSliderHandle.dragAndDrop({ x: 200, y: 0 }); - assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(183, 61, 182, 0.83)", "Color properly changed"); + assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(182, 61, 184, 0.83)", "Color properly changed"); assert.strictEqual(await stepInput.getAttribute("value"), "2", "Change event gets fired on hue slider change"); }); diff --git a/packages/main/test/specs/ComboBox.mobile.spec.js b/packages/main/test/specs/ComboBox.mobile.spec.js index bb580996aac6..7473dbc9a5d5 100644 --- a/packages/main/test/specs/ComboBox.mobile.spec.js +++ b/packages/main/test/specs/ComboBox.mobile.spec.js @@ -91,7 +91,7 @@ describe("Eventing", () => { it("Should fire input event with correct parameters when typing in internal input", async () => { const combo = await browser.$("#input-cb"); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#input-cb"); - + await combo.scrollIntoView(); await combo.click(); @@ -156,15 +156,15 @@ describe("Eventing", () => { assert.strictEqual(changeCountText, "1", "Change was fired once"); assert.strictEqual(await combo.getValue(), "Argentina", "The original value was changed"); - + }); it ("When select an item, then open the dialog again and delete the text, then press OK button, the value should be deleted.", async ()=> { const cb = await browser.$("#combo2"); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2"); - + await cb.click(); - + const resPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); const dialogInput = await resPopover.$(".ui5-input-inner-phone"); const okBtn = await resPopover.$(".ui5-responsive-popover-footer").$("ui5-button"); @@ -176,7 +176,7 @@ describe("Eventing", () => { await okBtn.click(); assert.strictEqual(await cb.getProperty("value"), "Algeria", "Value should be Algeria."); - + await cb.click(); await dialogInput.keys('Backspace'); await okBtn.click(); @@ -203,6 +203,20 @@ describe("Typeahead", () => { await dialogInput.keys("Bu"); assert.strictEqual(await dialogInput.getProperty("value"), sExpected, "Value is autocompleted"); }); + + it("Should not perform typeahead when it is disabled", async () => { + await browser.url("test/pages/ComboBox.html"); + + const combo = await browser.$("#combo-without-type-ahead"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-without-type-ahead") + + await combo.scrollIntoView(); + await combo.click(); + + const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone"); + await dialogInput.keys("b"); + assert.strictEqual(await dialogInput.getProperty("value"), "b", "Value is not autocompleted"); + }); }); describe("Picker filtering", () => { diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js index ce3cdcc22154..286eac952d18 100644 --- a/packages/main/test/specs/ComboBox.spec.js +++ b/packages/main/test/specs/ComboBox.spec.js @@ -180,6 +180,10 @@ describe("General interaction", () => { // act await arrow.click(); + + assert.ok(await popover.getProperty("opened"), "Popover should be displayed") + + listItems = await popover.$("ui5-list").$$("ui5-li"); await listItems[0].click(); // assert @@ -643,6 +647,24 @@ describe("Accessibility", async () => { assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement2, "Span value is correct.") }); + it ("Announce value state header when on focus", async () => { + await browser.url(`test/pages/ComboBox.html`); + + const combo = await browser.$("#value-state-error-text"); + const arrow = await combo.shadow$("[input-icon]"); + const input = await combo.shadow$("#ui5-combobox-input"); + const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite"); + const itemAnnouncement1 = "Please choose a country"; + + await arrow.click(); + + assert.strictEqual(await invisibleMessageSpan.getHTML(false), "", "Span value should be empty.") + + await input.keys("ArrowDown"); + + assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement1, "Value state message is announced on focus.") + }); + it ("Announce item with additional text on selection", async () => { await browser.url(`test/pages/ComboBox.html`); @@ -675,6 +697,7 @@ describe("Accessibility", async () => { const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite"); const itemAnnouncement1 = "Group Header A"; const itemAnnouncement2 = "Group Header Donut"; + const itemAnnouncement3 = "List item 1 of 13"; await arrow.click(); @@ -682,15 +705,18 @@ describe("Accessibility", async () => { await input.keys("ArrowDown"); - assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement1, "Span value is correct.") + assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement1, "First group header is announced") await input.keys("ArrowDown"); + + assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement3, "First list item is announced") + await input.keys("ArrowDown"); await input.keys("ArrowDown"); await input.keys("ArrowDown"); await input.keys("ArrowDown"); - assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement2, "Span value is correct.") + assert.strictEqual(await invisibleMessageSpan.getHTML(false), itemAnnouncement2, "Second group header is announced") }); it ("Tests setting value programmatically", async () => { @@ -1014,4 +1040,23 @@ describe("Keyboard navigation", async () => { assert.ok(await listItems[0].getProperty("selected"), "List Item should be selected"); assert.notOk(await listItems[1].getProperty("selected"), "List Item should not be selected"); }); + + it ("Tests disabled autocomplete(type-ahead)", async () => { + await browser.url(`test/pages/ComboBox.html`); + + const comboBox = await browser.$("#combo-without-type-ahead"); + const input = await comboBox.shadow$("#ui5-combobox-input"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-without-type-ahead"); + const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + + await input.click(); + await input.keys("b"); + + await browser.waitUntil(() => popover.getProperty("opened"), { + timeout: 200, + timeoutMsg: "Popover should be displayed" + }); + + assert.strictEqual(await input.getProperty("value"), "b", "Value is not autocompleted"); + }); }); diff --git a/packages/main/test/specs/DateTimePicker.spec.js b/packages/main/test/specs/DateTimePicker.spec.js index d4d7582024ac..442dafcf7074 100644 --- a/packages/main/test/specs/DateTimePicker.spec.js +++ b/packages/main/test/specs/DateTimePicker.spec.js @@ -4,19 +4,19 @@ const openPickerById = async (id, options) => { await browser.$(`#${id}`).scrollIntoView(); return browser.executeAsync((id, options, done) => { - done(document.querySelector(`#${id}`).openPicker(options)); + done(document.querySelector(`[id="${id}"]`).openPicker(options)); }, id, options); }; const closePickerById = id => { return browser.executeAsync((id, done) => { - done(document.querySelector(`#${id}`).closePicker()); + done(document.querySelector(`[id="${id}"]`).closePicker()); }, id); }; const isPickerOpen = id => { return browser.executeAsync((id, done) => { - done(document.querySelector(`#${id}`).isOpen()); + done(document.querySelector(`[id="${id}"]`).isOpen()); }, id); }; diff --git a/packages/main/test/specs/DayPicker.spec.js b/packages/main/test/specs/DayPicker.spec.js index d77e7513826f..91ed16148656 100644 --- a/packages/main/test/specs/DayPicker.spec.js +++ b/packages/main/test/specs/DayPicker.spec.js @@ -45,4 +45,20 @@ describe("Day Picker Tests", () => { assert.strictEqual(selectedDate, new Date(Date.now() + 24 * 3600 * 1000).getDate(), "Dates are equal"); }); + + it("Day names are correctly displayed when length is less than 3", async () => { + const dayPickerFirstDayName = await browser.$(`#${daypicker._sut}`).shadow$(".ui5-dp-firstday"); + const dayPickerFirstDayNameText = await dayPickerFirstDayName.getProperty("textContent"); + + assert.strictEqual(dayPickerFirstDayNameText, "Sun", "Name is rendered correctly"); + }); + + it("Day names are correctly displayed when length is more than 3", async () => { + browser.url(`test/pages/DayPicker.html?sap-ui-language=pt_PT`); + + const dayPickerFirstDayName = await browser.$(`#${daypicker._sut}`).shadow$(".ui5-dp-firstday"); + const dayPickerFirstDayNameText = await dayPickerFirstDayName.getProperty("textContent"); + + assert.strictEqual(dayPickerFirstDayNameText, "D", "Name is rendered correctly"); + }); }); diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js index bcb00cca1b6b..ef512ef070d4 100644 --- a/packages/main/test/specs/Dialog.spec.js +++ b/packages/main/test/specs/Dialog.spec.js @@ -598,6 +598,10 @@ describe("Page scrolling", () => { it("tests multiple dialogs page scrolling", async () => { const preventButtonBefore = await browser.$("#prevent"); + const { + height: oldScreenHeight, + width: oldScreenWidth + } = await browser.getWindowSize(); await browser.setWindowSize(400, 400); await preventButtonBefore.scrollIntoView(); @@ -613,19 +617,31 @@ describe("Page scrolling", () => { const offsetAfter = await preventButtonBefore.getLocation('y'); assert.strictEqual(offsetBefore, offsetAfter, "No vertical page scrolling when multiple dialogs are closed"); + + await browser.setWindowSize(oldScreenWidth, oldScreenHeight); }); }); -describe("Responsive paddings", () => { +describe("Responsive paddings", async () => { + let oldScreenHeight, oldScreenWidth; + before(async () => { + const browserSize = await browser.getWindowSize(); + oldScreenHeight = browserSize.height; + oldScreenWidth = browserSize.width; await browser.url(`test/pages/Dialog.html`); + await browser.setWindowSize(1000, 400); + }); + + after(async () => { + await browser.setWindowSize(oldScreenWidth, oldScreenHeight); }); it("tests responsive paddings", async () => { const openDialog = await browser.$("#btnOpenDialog"); await openDialog.click(); - const expectedPadding = "16px"; + const expectedPadding = "32px"; const dialog = await browser.$("#dialog"); // content @@ -648,7 +664,7 @@ describe("Responsive paddings", () => { const openDialog = await browser.$("#btnOpenDialogNoPaddings"); await openDialog.click(); - const expectedPadding = "16px"; + const expectedPadding = "32px"; const expectedContentPadding = "0px"; const dialog = await browser.$("#dialogNoPaddings"); @@ -667,6 +683,16 @@ describe("Responsive paddings", () => { await browser.$("#btnCloseDialogNoPaddings").click(); }); + + it("tests media-range", async () => { + const openDialog = await browser.$("#btnOpenDialog"); + await openDialog.click(); + const dialog = await browser.$("#dialog"); + + assert.strictEqual(await dialog.getAttribute("media-range"), "M", "dialog has correct media range"); + + await browser.$("#btnCloseDialog").click(); + }); }); describe("Dialog States", () => { diff --git a/packages/main/test/specs/FormSupport.spec.js b/packages/main/test/specs/FormSupport.spec.js index 029d62b4a677..5e1b1445e090 100644 --- a/packages/main/test/specs/FormSupport.spec.js +++ b/packages/main/test/specs/FormSupport.spec.js @@ -17,11 +17,18 @@ describe("Form support", () => { it("Submit button does submit forms", async () => { await browser.url(`test/pages/FormSupport.html`); + // Enter multiline text in TextArea + const textarea = await browser.$("#ta"); + await textarea.click() + await browser.keys("Enter"); + await browser.keys("o"); + await browser.keys("k"); + const submitButton = await browser.$("#b2"); await submitButton.click(); const formWasSubmitted = await browser.executeAsync(done => { - const expectedFormData = "?input=ok&ta=ok&dp=Apr+10%2C+2019&cb=on&radio=b&si=5"; + const expectedFormData = "?input=ok&ta=ok%0D%0Aok&dp=Apr+10%2C+2019&cb=on&radio=b&si=5"; done(location.href.endsWith(expectedFormData)); }); assert.ok(formWasSubmitted, "For was submitted and URL changed"); diff --git a/packages/main/test/specs/Icon.spec.js b/packages/main/test/specs/Icon.spec.js index 4129ef49549e..7d9c3c9ce7ad 100644 --- a/packages/main/test/specs/Icon.spec.js +++ b/packages/main/test/specs/Icon.spec.js @@ -66,19 +66,19 @@ describe("Icon general interaction", () => { // assert - initial SVG path const iconPath = await browser.$("#myIcon").shadow$(".ui5-icon-root path"); const pathValue = await iconPath.getAttribute("d"); - assert.ok(pathValue.startsWith(V4_PATH_START), "Icon's path in sap_fiori_3"); + assert.ok(pathValue.startsWith(V5_PATH_START), "Icon's path in sap_horizon."); // act - switch theme await browser.executeAsync( async (newTheme, done) => { const config = window['sap-ui-webcomponents-bundle'].configuration; await config.setTheme(newTheme); done(); - }, "sap_horizon"); + }, "sap_fiori_3"); // assert - SVG path changed const iconPathAfter = await browser.$("#myIcon").shadow$(".ui5-icon-root path"); const iconPathValueAfter = await iconPathAfter.getAttribute("d"); - assert.ok(iconPathValueAfter.startsWith(V5_PATH_START), "Icon's path changed in sap_horizon."); + assert.ok(iconPathValueAfter.startsWith(V4_PATH_START), "Icon's path changed in sap_fiori_3."); }); it("Tests icon modules' exported values", async () => { diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js index e50fb435d2d8..a379868651e0 100644 --- a/packages/main/test/specs/Input.spec.js +++ b/packages/main/test/specs/Input.spec.js @@ -817,7 +817,7 @@ describe("Input general interaction", () => { await dynamicSuggestionsInnerInput.keys("c"); //assert - assert.strictEqual(await dynamicSuggestionsCount.getText(), "4 results are available", "Suggestions count is available since value is entered"); + assert.strictEqual(await dynamicSuggestionsCount.getText(), "3 results are available", "Group items should be excluded of the count of available results."); await dynamicSuggestionsInnerInput.keys("Backspace"); // Close suggestions to not intercept the click in the input below for the last test @@ -831,6 +831,50 @@ describe("Input general interaction", () => { assert.strictEqual(await suggestionsCount.getText(), "5 results are available", "Suggestions count is available since the suggestions popover is opened"); }); + it("Suggestions announcement", async () => { + await browser.url(`test/pages/Input.html`); + + const inputWithGroups = await $("#inputCompact"); + const inputSuggestions = await $("#myInput2"); + const inputWithGroupsInnerInput = await inputWithGroups.shadow$("input"); + const inputWithGroupsAnnouncement = await inputWithGroups.shadow$(`#${await inputWithGroups.getProperty("_id")}-selectionText`); + const suggestionsAnnouncement = await inputSuggestions.shadow$(`#${await inputSuggestions.getProperty("_id")}-selectionText`); + + //act + await inputWithGroups.click(); + + //assert + assert.strictEqual(await inputWithGroupsAnnouncement.getText(), "", "Suggestions announcement is not available on initially"); + + //act + await inputWithGroupsInnerInput.keys("a"); + await inputWithGroupsInnerInput.keys("ArrowDown"); + + //assert + assert.strictEqual(await inputWithGroupsAnnouncement.getText(), "Group Header A", "Group item announcement should not contain the position and total coout."); + + //act + await inputWithGroupsInnerInput.keys("ArrowDown"); + + const announcementText = await inputWithGroupsAnnouncement.getText(); + + //assert + assert.ok(announcementText.includes("List item 1 of 12"), "The total count announcement and position of items should exclude group items."); + assert.strictEqual(await inputWithGroupsAnnouncement.getText(), "travel the world explore List item 1 of 12", "The additional text and description are announced"); + await inputWithGroupsInnerInput.keys("Backspace"); + + // Close suggestions to not intercept the click in the input below for the last test + await inputWithGroupsInnerInput.keys("Escape"); + + //act + await inputSuggestions.click(); + await (await inputSuggestions.shadow$("input")).keys("c"); + await inputWithGroupsInnerInput.keys("ArrowDown"); + + //assert + assert.strictEqual(await suggestionsAnnouncement.getText(), "List item 1 of 5", "Item position and count is announced correctly"); + }); + it("Should close the Popover when no suggestions are available", async () => { await browser.url(`test/pages/Input.html`); diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js index 14950370a4e5..d2f731078165 100644 --- a/packages/main/test/specs/Link.spec.js +++ b/packages/main/test/specs/Link.spec.js @@ -45,9 +45,10 @@ describe("General API", () => { it("should wrap the text of the link", async () => { const wrappingLabel = await browser.$("#wrapping-link"); const truncatingLabel = await browser.$("#non-wrapping-link"); + const LINK_HEIGHT = 20; // It's 20px in sap_horizon, previously 18px in sap_fiori_3 assert.isAbove((await wrappingLabel.getSize()).height, (await truncatingLabel.getSize()).height); - assert.strictEqual((await truncatingLabel.getSize()).height, 18, "The truncated label should be single line."); + assert.strictEqual((await truncatingLabel.getSize()).height, LINK_HEIGHT, "The truncated label should be single line."); }); it("should prevent clicking on disabled link", async () => { diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js index 0aae41dce9c2..ae40832a45af 100644 --- a/packages/main/test/specs/List.spec.js +++ b/packages/main/test/specs/List.spec.js @@ -423,6 +423,7 @@ describe("List Tests", () => { it("tests aria-labelledby for mode label", async () => { const justList = await browser.$("#justList"); const listDelete = await browser.$("#listDelete"); + const emptyListDelete = await browser.$("#emptyListDelete"); const listMultiSelect = await browser.$("#listMultiSelect"); const listSingleSelect = await browser.$("#listSingleSelect"); @@ -434,6 +435,7 @@ describe("List Tests", () => { const texts = await getResourceBundleTexts({ keys, id: "justList" }); assert.strictEqual(await justList.getProperty("ariaLabelModeText"), "", "aria-label mode message is correct"); + assert.strictEqual(await emptyListDelete.getProperty("ariaLabelModeText"), "", "aria-label mode message is empty when there are no items"); assert.strictEqual(await listDelete.getProperty("ariaLabelModeText"), texts.ARIA_LABEL_LIST_DELETABLE, "aria-label mode message is correct"); assert.strictEqual(await listMultiSelect.getProperty("ariaLabelModeText"), texts.ARIA_LABEL_LIST_MULTISELECTABLE, "aria-label mode message is correct"); assert.strictEqual(await listSingleSelect.getProperty("ariaLabelModeText"), texts.ARIA_LABEL_LIST_SELECTABLE, "aria-label mode message is correct"); @@ -574,4 +576,17 @@ describe("List Tests", () => { assert.strictEqual(await itemCloseResult.getProperty("value"), "0", "item-close event is not fired when the button is pressed."); }); + + it("List item fires _request-tabindex-change event and updates tabindex when inner element receives focus", async () => { + const innerElement = await browser.$("#effectiveTabindexChange #country11 button"); + const listItem = await browser.$("#effectiveTabindexChange #country11"); + const rootItemElement = await listItem.shadow$(".ui5-li-root"); + + // Focus on the target list item + await innerElement.click(); + + const newTabIndex = await rootItemElement.getAttribute("tabindex"); + + assert.equal(newTabIndex , "0", "The tabIndex of the list item root should be '0' when inner element receives focus."); + }); }); diff --git a/packages/main/test/specs/Menu.spec.js b/packages/main/test/specs/Menu.spec.js index 3dcd37530564..69d255036728 100644 --- a/packages/main/test/specs/Menu.spec.js +++ b/packages/main/test/specs/Menu.spec.js @@ -52,18 +52,30 @@ describe("Menu interaction", () => { openButton.click(); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu"); - const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + const staticAreaItem = await browser.$(`.${staticAreaItemClassName}`); + const popover = staticAreaItem.shadow$("ui5-responsive-popover"); const listItems = await popover.$("ui5-list").$$("ui5-li"); + const submenuList = await staticAreaItem.shadow$(".ui5-menu-submenus"); listItems[3].click(); // open sub-menu - assert.ok(await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-menu-submenus").$("ui5-menu"), - "The second level sub-menu is being created"); // new ui5-menu element is created for the sub-menu + await submenuList.$("ui5-menu").waitForExist({ + timeout: 1000, + timeoutMsg: "The second level sub-menu is should be created" + }) + + assert.ok(await submenuList.$("ui5-menu"), "The second level sub-menu is being created"); // new ui5-menu element is created for the sub-menu await browser.keys("ArrowLeft"); // back to main menu await browser.keys("ArrowDown"); // go to the next menu item (close sub-menu) - assert.strictEqual(await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-menu-submenus").$$("ui5-menu").length, 0, + await submenuList.$("ui5-menu").waitForExist({ + reverse: true, + timeout: 1000, + timeoutMsg: "The second level sub-menu is should be destroyed" + }) + + assert.strictEqual(await submenuList.$$("ui5-menu").length, 0, "The second level sub-menu is being destroyed"); // sub-menu ui5-menu element is destroyed }); diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index a758f27520a5..e144c00f55bd 100644 --- a/packages/main/test/specs/MultiComboBox.spec.js +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -2,7 +2,7 @@ import { assert } from "chai"; const getTokenizerPopoverId = async (mcbId) => { return await browser.executeAsync(async (mcbId, done) => { - const input = document.querySelector(`#${mcbId}`); + const input = document.querySelector(`[id="${mcbId}"]`); const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef()); done(staticAreaItem.host.classList[0]); @@ -1592,7 +1592,6 @@ describe("MultiComboBox general interaction", () => { mcNMoreLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MULTIINPUT_SHOW_MORE_TOKENS, 1) }); }); - assert.strictEqual(await nItemsLabel.getText(), resourceBundleText.mcItemsLabelText, "Text should be 2 Items"); assert.strictEqual(await nMoreLabel.getText(), resourceBundleText.mcNMoreLabelText, "Text should be 1 More"); }); diff --git a/packages/main/test/specs/MultiInput.mobile.spec.js b/packages/main/test/specs/MultiInput.mobile.spec.js index bafb3b4e487f..5d202fc6d24b 100644 --- a/packages/main/test/specs/MultiInput.mobile.spec.js +++ b/packages/main/test/specs/MultiInput.mobile.spec.js @@ -2,7 +2,7 @@ import { assert } from "chai"; const getTokenizerPopoverId = async (inputId) => { return await browser.executeAsync(async (inputId, done) => { - const input = document.querySelector(`#${inputId}`); + const input = document.querySelector(`[id="${inputId}"]`); const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef()); done(staticAreaItem.host.classList[0]); diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js index cfcce06f8802..4e4cbb9c685b 100644 --- a/packages/main/test/specs/MultiInput.spec.js +++ b/packages/main/test/specs/MultiInput.spec.js @@ -2,7 +2,7 @@ import { assert } from "chai"; const getTokenizerPopoverId = async (inputId) => { return await browser.executeAsync(async (inputId, done) => { - const input = document.querySelector(`#${inputId}`); + const input = document.querySelector(`[id="${inputId}"]`); const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef()); done(staticAreaItem.host.classList[0]); diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js index cce592f73997..2764c7d51bd7 100644 --- a/packages/main/test/specs/Popover.spec.js +++ b/packages/main/test/specs/Popover.spec.js @@ -523,4 +523,29 @@ describe("Horizontal Alignment", () => { assert.ok(await isHorizontallyLeftAligned(popover, opener), `Popover should be left aligned, flipped by RTL direction`); }); +}); + +describe("Responsive paddings", () => { + let oldScreenHeight, oldScreenWidth; + + before(async () => { + const browserSize = await browser.getWindowSize(); + oldScreenHeight = browserSize.height; + oldScreenWidth = browserSize.width; + await browser.url(`test/pages/Popover.html`); + await browser.setWindowSize(1000, 400); + }); + + after(async () => { + await browser.setWindowSize(oldScreenWidth, oldScreenHeight); + }); + + it("tests media-range", async () => { + const popover = await browser.$("#popXRightWide"); + const btnOpenPopover = await browser.$("#btnOpenXRightWide"); + + await btnOpenPopover.click(); + + assert.strictEqual(await popover.getAttribute("media-range"), "M", "Popover has correct media range"); + }); }); \ No newline at end of file diff --git a/packages/main/test/specs/RatingIndicator.spec.js b/packages/main/test/specs/RatingIndicator.spec.js index c2ad42bc698f..1aa8c519ce55 100644 --- a/packages/main/test/specs/RatingIndicator.spec.js +++ b/packages/main/test/specs/RatingIndicator.spec.js @@ -116,11 +116,11 @@ describe("Rating Indicator general interaction", () => { assert.strictEqual(await ratingIndicatorList.getAttribute("aria-hidden"), "true", "aria-hidden is set"); }); - it("Tests ACC attrs - title attribute provided", async () => { + it("Tests ACC attrs - tooltip property", async () => { const ratingIndicator = await browser.$("#rating-indicator-title").shadow$(".ui5-rating-indicator-root"); const TOOLTIP = "Test"; - assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The title attribute is rendered in the inner div as well."); + assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The tooltip property is rendered as a title in the inner div."); }); it("Tests ACC attrs - required property add aria-description", async () => { diff --git a/packages/main/test/specs/Slider.spec.js b/packages/main/test/specs/Slider.spec.js index 4f4168be196b..76d514aa7a93 100644 --- a/packages/main/test/specs/Slider.spec.js +++ b/packages/main/test/specs/Slider.spec.js @@ -102,6 +102,25 @@ describe("Properties synchronization and normalization", () => { assert.strictEqual((await slider.getProperty("_labels")).length, 6, "Labels must be 6 - 1 for every 4 tickmarks (and 8 current value points)"); }); + it("If the min and max properties are changed, the tickmarks and labels must be updated also.", async () => { + const slider = await browser.$("#slider-tickmarks-labels"); + const labelLength = (await slider.getProperty("_labels")).length; + + assert.strictEqual((await slider.getProperty("_labels"))[0], "-20", "Initial slider start label is -20."); + assert.strictEqual((await slider.getProperty("_labels"))[labelLength - 1], "20", "Initial slider end label is 20."); + + // simulate the synchronous update of min and max made programatically + await browser.executeAsync(done => { + const slider = document.getElementById("slider-tickmarks-labels"); + slider.min = 0; + slider.max = 40; + done(); + }); + + assert.strictEqual((await slider.getProperty("_labels"))[0], "0", "Slider start label is updated correctly."); + assert.strictEqual((await slider.getProperty("_labels"))[labelLength - 1], "40", "Slider end label is updated correctly."); + }); + it("If min property is set to a greater number than the max property their effective values should be swapped, their real ones - not", async () => { const slider = await browser.$("#basic-slider"); diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js index 7c57fddd785e..bfc68b1aa6ca 100644 --- a/packages/main/test/specs/TabContainer.spec.js +++ b/packages/main/test/specs/TabContainer.spec.js @@ -55,20 +55,6 @@ describe("TabContainer general interaction", () => { await cbPrevent.click(); }); - it("tests custom media ranges", async () => { - await browser.setWindowSize(520, 1080); - assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "S", "media-range=S"); - - await browser.setWindowSize(650, 1080); - assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "M", "media-range=M"); - - await browser.setWindowSize(1350, 1080); - assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "L", "media-range=L"); - - await browser.setWindowSize(1650, 1080); - assert.strictEqual(await browser.$("#tabContainerIconOnly").getAttribute("media-range"), "XL", "media-range=XL"); - }); - it("tests if content is scrollable when tabcontainer takes limited height by its parent", async () => { const { tcHeight, tcScrollHeight } = await browser.executeAsync(done => { const scrollableContent = document.getElementById("tc-scrollable-child"); @@ -135,7 +121,7 @@ describe("TabContainer general interaction", () => { await browser.setWindowSize(1000, 1080); const tabcontainer = await browser.$("#tabContainerStartAndEndOverflow"); const startOverflow = await tabcontainer.shadow$(".ui5-tc__overflow--start"); - assert.strictEqual(await startOverflow.getProperty("innerText"), "+11", "11 tabs in start overflow"); + assert.strictEqual(await startOverflow.getProperty("innerText"), "+12", "12 tabs in start overflow"); await browser.setWindowSize(800, 1080); assert.strictEqual(await startOverflow.getProperty("innerText"), "+14", "14 tabs in start overflow"); diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js index efe24d6d67fa..34d03b7cb52b 100644 --- a/packages/main/test/specs/TextArea.spec.js +++ b/packages/main/test/specs/TextArea.spec.js @@ -1,5 +1,8 @@ import { assert } from "chai"; +const isMacOS = process.platform === 'darwin'; +const keyCtrlToPress = isMacOS ? 'Command' : 'Control'; + describe("Attributes propagation", () => { before(async () => { await browser.url(`test/pages/TextArea.html`); @@ -349,4 +352,25 @@ describe("Value update", () => { assert.strictEqual(ariaHiddenText.includes("Value State Error"), true, "Hidden screen reader text is correct"); assert.strictEqual(valueStateText.includes("Extra long text"), true, "Displayed value state message text is correct"); }); + + it("Should select all exceeded characters on paste", async () => { + const textarea = await browser.$("#ta-exceeded-text"); + const textareaInner = await browser.$("#ta-exceeded-text").shadow$("textarea"); + + // act + await textareaInner.click(); + await browser.keys([keyCtrlToPress, "a"]); + await browser.keys([keyCtrlToPress, "x"]); + await browser.keys([keyCtrlToPress, "v"]); + + const selectionLength = await browser.execute(() =>{ + const textarea = document.getElementById("ta-exceeded-text").shadowRoot.querySelector("textarea"); + return textarea.selectionEnd - textarea.selectionStart; + }); + + const counter = await browser.$("#ta-exceeded-text").shadow$(".ui5-textarea-exceeded-text"); + const count = parseInt(await counter.getText()); + + assert.strictEqual(count, selectionLength, "14 symbols should exceed"); + }); }); diff --git a/packages/main/test/specs/TimePicker.mobile.spec.js b/packages/main/test/specs/TimePicker.mobile.spec.js new file mode 100644 index 000000000000..864c3287b15a --- /dev/null +++ b/packages/main/test/specs/TimePicker.mobile.spec.js @@ -0,0 +1,244 @@ +import { assert } from "chai"; + +/** + * + * @param {Array} options.keys The bundle keys of the texts + * @param {String} options.id ID of the component to get the texts from + * @returns + */ +async function getResourceBundleTexts(options) { + return browser.executeAsync((options, done) => { + const component = document.getElementById(options.id); + + const texts = options.keys.reduce((result, key) => { + result[key] = component.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts[key]) + return result; + }, {}); + done(texts); + + }, options); +} + +describe("TimePicker on phone - general interactions", () => { + before(async () => { + await browser.url(`test/pages/TimePicker.html?sap-ui-language=bg`); + await browser.emulateDevice('iPhone X'); + }); + + it("opening of popover with numeric inputs", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + // act + await timePicker.setProperty("value", "11:12:13"); + await timePicker.shadow$("ui5-input").click(); + + // assert + assert.ok(await timePickerPopover.getAttribute("open"), "Popover found"); + assert.ok(await timeSelectionInputs, "TimeSelectionInputs found"); + assert.strictEqual(await components.length, 3, "Found 3 Inputs"); + assert.strictEqual(await hoursInnerInput.getValue(), "11", "Correct hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "12", "Correct minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "13", "Correct seconds value is set"); + }); + + it("value change with numeric inputs on OK and Cancel button press", async () => { + const timePicker = await browser.$("#timepicker3"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker3"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timePickerPopoverButtons = await timePickerPopover.$('div.ui5-time-picker-footer').$$("ui5-button"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + const amPmButton = await timeSelectionInputs.shadow$('ui5-segmented-button'); + const amPmButtonItems = await amPmButton.$$("ui5-segmented-button-item"); + + // act + await timePicker.setProperty("value", "10:20:30 AM"); + await timePicker.shadow$("ui5-input").click(); + + await hoursInnerInput.setValue("11"); + await minutesInnerInput.setValue("22"); + await secondsInnerInput.setValue("33"); + await amPmButtonItems[1].click(); // click on PM button + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "11", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "22", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "33", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "11:22:33 PM", "Correct new time is set to the TimePicker"); + + // act + await timePicker.shadow$("ui5-input").click(); + await hoursInnerInput.setValue("10"); + await minutesInnerInput.setValue("20"); + await secondsInnerInput.setValue("30"); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "10", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "20", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "30", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[1].click(); // click on Cancel button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "11:22:33 PM", "New time is not set to the TimePicker"); + }); + + it("direct number typing", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timePickerPopoverButtons = await timePickerPopover.$('div.ui5-time-picker-footer').$$("ui5-button"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + // act + await timePicker.setProperty("value", "10:20:30 AM"); + await timePicker.shadow$("ui5-input").click(); + await browser.keys(["0", "8", "2", "4", "1", "3"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "08", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "24", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "13", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "08:24:13", "New time is not set to the TimePicker"); + + // act + await timePicker.shadow$("ui5-input").click(); + await browser.keys(["3", "6", "8"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "03", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "06", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "08", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "03:06:08", "New time is not set to the TimePicker"); + + // act + await timePicker.shadow$("ui5-input").click(); + await browser.keys(["4", "5"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "04", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "05", "Correct new minutes value is set"); + + // act + await browser.pause(1500); // simulate cooldown + await browser.keys(["3", "2", "1", "0"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "04", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "32", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "10", "Correct new seconds value is set"); + + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "04:32:10", "New time is not set to the TimePicker"); + }); + +}); + +describe("TimePicker on phone - accessibility and other input attributes", () => { + before(async () => { + await browser.url(`test/pages/TimePicker.html?sap-ui-language=bg`); + await browser.emulateDevice('iPhone X'); + }); + + it("accessibility attributes of numeric inputs", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + const keys = [ + "TIMEPICKER_INPUTS_ENTER_HOURS", + "TIMEPICKER_INPUTS_ENTER_MINUTES", + "TIMEPICKER_INPUTS_ENTER_SECONDS", + ]; + const texts = await getResourceBundleTexts({ keys, id: "timepicker" }); + + // act + await timePicker.shadow$("ui5-input").click(); + + // assert + assert.strictEqual(await hoursInnerInput.getAttribute("step"), "1", "Correct hours 'step' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("min"), "0", "Correct hours 'min' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("max"), "23", "Correct hours 'max' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("aria-label"), texts.TIMEPICKER_INPUTS_ENTER_HOURS, "Correct hours 'aria-label' attribute"); + + assert.strictEqual(await minutesInnerInput.getAttribute("step"), "1", "Correct minutes 'step' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("min"), "0", "Correct minutes 'min' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("max"), "59", "Correct minutes 'max' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("aria-label"), texts.TIMEPICKER_INPUTS_ENTER_MINUTES, "Correct minutes 'aria-label' attribute"); + + assert.strictEqual(await secondsInnerInput.getAttribute("step"), "1", "Correct seconds 'step' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("min"), "0", "Correct seconds 'min' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("max"), "59", "Correct seconds 'max' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("aria-label"), texts.TIMEPICKER_INPUTS_ENTER_SECONDS, "Correct seconds 'aria-label' attribute"); + }); + + it("other important attributes of numeric inputs", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + // act + await timePicker.shadow$("ui5-input").click(); + + // assert + assert.strictEqual(await hoursInnerInput.getAttribute("type"), "number", "Correct hours 'type' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("autocomplete"), "off", "Correct hours 'autocomplete' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("pattern"), "[0-9]*", "Correct hours 'pattern' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("inputmode"), "numeric", "Correct hours 'inputmode' attribute"); + + assert.strictEqual(await minutesInnerInput.getAttribute("type"), "number", "Correct minutes 'type' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("autocomplete"), "off", "Correct minutes 'autocomplete' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("pattern"), "[0-9]*", "Correct minutes 'pattern' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("inputmode"), "numeric", "Correct minutes 'inputmode' attribute"); + + assert.strictEqual(await secondsInnerInput.getAttribute("type"), "number", "Correct seconds 'type' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("autocomplete"), "off", "Correct seconds 'autocomplete' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("pattern"), "[0-9]*", "Correct seconds 'pattern' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("inputmode"), "numeric", "Correct seconds 'inputmode' attribute"); + }); + +}); diff --git a/packages/main/test/specs/TimePicker.spec.js b/packages/main/test/specs/TimePicker.spec.js index 4a38787cb55d..dcc689c6640b 100644 --- a/packages/main/test/specs/TimePicker.spec.js +++ b/packages/main/test/specs/TimePicker.spec.js @@ -30,7 +30,7 @@ describe("TimePicker general interaction", () => { // assert assert.strictEqual(hoursClockValue, 11, "Hours are equal"); assert.strictEqual(minutesClockValue, 12, "Minutes are equal"); - assert.strictEqual(secondsClockValue, 13, "Minutes are equal"); + assert.strictEqual(secondsClockValue, 13, "Seconds are equal"); }); it("tests clocks submit value", async () => { diff --git a/packages/main/test/specs/TimePickerClock.spec.js b/packages/main/test/specs/TimePickerClock.spec.js index 216aca99b931..d55dd7be65b5 100644 --- a/packages/main/test/specs/TimePickerClock.spec.js +++ b/packages/main/test/specs/TimePickerClock.spec.js @@ -56,14 +56,11 @@ describe("Clock API", () => { it("'lastItemReplacement' and 'prependZero' properties", async () => { const hours24 = await browser.$("#myHours24"); - const hours00 = await browser.$("#myHours00"); const minutes = await browser.$("#myMinutes"); const numbersInHours24 = await hours24.shadow$$(".ui5-tp-clock-item:not([marker]) .ui5-tp-clock-number"); - const numbersInHours00 = await hours00.shadow$$(".ui5-tp-clock-item:not([marker]) .ui5-tp-clock-number"); const numbersInMinutes = await minutes.shadow$$(".ui5-tp-clock-item:not([marker]) .ui5-tp-clock-number"); - assert.strictEqual(await numbersInHours24[numbersInHours24.length-1].getText(), "24", "The last number element in clock with prependZero=false and no lastItemReplacement property set is '24'"); - assert.strictEqual(await numbersInHours00[numbersInHours00.length-1].getText(), "00", "The last number element in clock with prependZero=true and lastItemReplacement=0 is '00'"); + assert.strictEqual(await numbersInHours24[numbersInHours24.length-1].getText(), "00", "The last number element in clock with prependZero=false and no lastItemReplacement property set is '24'"); assert.strictEqual(await numbersInMinutes[numbersInMinutes.length-1].getText(), "0", "The last number element in clock with prependZero=false and lastItemReplacement=0 is '0'"); }); }); diff --git a/packages/playground/.storybook/addons/html/HTMLTransformation.ts b/packages/playground/.storybook/addons/html/HTMLTransformation.ts index ee131a16da1c..b4a57aa4cd2c 100644 --- a/packages/playground/.storybook/addons/html/HTMLTransformation.ts +++ b/packages/playground/.storybook/addons/html/HTMLTransformation.ts @@ -1,4 +1,4 @@ -import { AttributeProcessor, IProcessor } from "./processors"; +import { AttributeProcessor, StylesProcessor, IProcessor } from "./processors"; export interface IHTMLTransformation { transform(html: string): string; @@ -9,20 +9,31 @@ export interface IHTMLTransformation { * Used by the HTML addon. */ export class HTMLTransformation implements IHTMLTransformation { - constructor(private processors: IProcessor[]) { - this.processors = processors; + constructor(private headProcessors: IProcessor[], private bodyProcessors: IProcessor[]) { + this.headProcessors = headProcessors; + this.bodyProcessors = bodyProcessors; } transform(html: string): string { - const dom = this.convertToDOM(html); + let transformed = ""; + const dom = this.convertToDOM(html), + head = dom.head, + body = dom.body; - this.walk(dom, (node) => { - this.processors.forEach((processor) => { + this.headProcessors.forEach((processor) => { + processor.process(head); + }); + + this.walk(body, (node) => { + this.bodyProcessors.forEach((processor) => { processor.process(node); }); }); - const transformed = this.convertToString(dom); + if (head.innerHTML) { + transformed += this.convertToString(head); + } + transformed += this.convertToString(body); return transformed; } @@ -40,13 +51,15 @@ export class HTMLTransformation implements IHTMLTransformation { return serializer.serializeToString(dom); } - private convertToDOM(html: string): HTMLElement { + private convertToDOM(html: string): Document { const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); - return doc.body; + return doc; } + } -const processors = [new AttributeProcessor()]; +const headProcessors = [new StylesProcessor()]; +const bodyProcessors = [new AttributeProcessor()]; -export const htmlTransformation = new HTMLTransformation(processors); +export const htmlTransformation = new HTMLTransformation(headProcessors, bodyProcessors); diff --git a/packages/playground/.storybook/addons/html/processors/StylesProcessor.ts b/packages/playground/.storybook/addons/html/processors/StylesProcessor.ts new file mode 100644 index 000000000000..216a762ed447 --- /dev/null +++ b/packages/playground/.storybook/addons/html/processors/StylesProcessor.ts @@ -0,0 +1,43 @@ +import { IProcessor } from "./IProcessor"; + +/** + * This class is responsible for formatting the style elements of the story: + * merge multiple style elements and unify their indentation. + */ +export class StylesProcessor implements IProcessor { + process(node: HTMLElement): void { + this.mergeStyles(node); + } + + private mergeStyles(dom: HTMLElement) { + const styleElements = Array.from(dom.getElementsByTagName('style')); + if (styleElements.length > 1) { // merge needed + let mergedStyles = ""; + for (let i = 0; i < styleElements.length; i++) { + mergedStyles += this.removeIndentation(styleElements[i].innerHTML); + styleElements[i].remove(); + } + const mergedStyleElement = styleElements[0]; + mergedStyleElement.innerHTML = mergedStyles; + dom.prepend(mergedStyleElement); + } + } + + private removeIndentation(str: string) { + const lines = str.split('\n'); + let shortestIndent = Infinity; + for (let i = 0; i < lines.length; i++) { + if (lines[i].trim().length === 0) { + continue; + } + let indent = lines[i].search(/\S/); + if (indent < shortestIndent && indent !== -1) { + shortestIndent = indent; + } + } + for (let i = 0; i < lines.length; i++) { + lines[i] = lines[i].substring(shortestIndent); + } + return lines.join('\n'); + } +} diff --git a/packages/playground/.storybook/addons/html/processors/index.ts b/packages/playground/.storybook/addons/html/processors/index.ts index 2c77c92e3488..62fda0d31631 100644 --- a/packages/playground/.storybook/addons/html/processors/index.ts +++ b/packages/playground/.storybook/addons/html/processors/index.ts @@ -1,2 +1,3 @@ export * from "./AttributeProcessor"; +export * from "./StylesProcessor"; export * from "./IProcessor"; diff --git a/packages/playground/.storybook/decorators/useOptions.ts b/packages/playground/.storybook/decorators/useOptions.ts index 7084ba9ca25f..2da3c9eb2128 100644 --- a/packages/playground/.storybook/decorators/useOptions.ts +++ b/packages/playground/.storybook/decorators/useOptions.ts @@ -10,10 +10,6 @@ export const themes: Themes = { "Evening Horizon": "sap_horizon_dark", "Horizon High Contrast Black": "sap_horizon_hcb", "Horizon High Contrast White": "sap_horizon_hcw", - "Morning Horizon Preview": "sap_horizon_exp", - "Evening Horizon Preview": "sap_horizon_dark_exp", - "Horizon High Contrast Black Preview": "sap_horizon_hcb_exp", - "Horizon High Contrast White Preview": "sap_horizon_hcw_exp", "Quartz Light": "sap_fiori_3", "Quartz Dark": "sap_fiori_3_dark", "Quartz High Contrast Black": "sap_fiori_3_hcb", diff --git a/packages/playground/.storybook/sbTheme.ts b/packages/playground/.storybook/sbTheme.ts index 3dcfa3cb99b5..dec5ceddbaea 100644 --- a/packages/playground/.storybook/sbTheme.ts +++ b/packages/playground/.storybook/sbTheme.ts @@ -4,6 +4,6 @@ export default create({ base: "light", brandTitle: "UI5 Web Components", brandImage: `../assets/images/sb-logo.png`, - brandUrl: './', + brandUrl: '../', brandTarget: "_self", }); diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index baaeef45c1ff..8d3211c29c70 100644 --- a/packages/playground/CHANGELOG.md +++ b/packages/playground/CHANGELOG.md @@ -3,6 +3,115 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Features + +* **ui5-illustrated-message:** titleLevel property added ([#7771](https://github.com/SAP/ui5-webcomponents/issues/7771)) ([2883c58](https://github.com/SAP/ui5-webcomponents/commit/2883c587f367e51e0f08065498b990f86e60e88c)), closes [#7037](https://github.com/SAP/ui5-webcomponents/issues/7037) + + + + + +# [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + +# [1.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + + + + +# [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + +# [1.19.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.0...v1.19.0-rc.1) (2023-10-19) + + +### Features + +* **ui5-combobox:** add attribute `no-typeahead` ([#7692](https://github.com/SAP/ui5-webcomponents/issues/7692)) ([4714835](https://github.com/SAP/ui5-webcomponents/commit/4714835990da6858f47462534b46978a9b0c65fc)) +* **ui5-rating-indicator:** introduce tooltip property ([#7687](https://github.com/SAP/ui5-webcomponents/issues/7687)) ([f2668b6](https://github.com/SAP/ui5-webcomponents/commit/f2668b6889259c7295b06fe47f846b434510f671)) + + + + + +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **ui5-page:** adjust Horizon themes ([#7685](https://github.com/SAP/ui5-webcomponents/issues/7685)) ([39ccfe6](https://github.com/SAP/ui5-webcomponents/commit/39ccfe63d07b74bb50eb46a419de34fa1461bc6c)) + + + + + +## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + +# [1.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + +# [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) + + +### Bug Fixes + +* **ui5-input,ui5-page,ui5-rating-indicator,ui5-slider,ui5-textarea:** improve samples names ([#7588](https://github.com/SAP/ui5-webcomponents/issues/7588)) ([202ac76](https://github.com/SAP/ui5-webcomponents/commit/202ac768dd824bd5eea1cb8e4fc3e30301ab6f3b)) + + +### Features + +* **ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input:** add wrapping in suggestions and n-more ([#7509](https://github.com/SAP/ui5-webcomponents/issues/7509)) ([21528a0](https://github.com/SAP/ui5-webcomponents/commit/21528a0ae5f3cec84d30362eba79bb6fa08a75d4)) + + + + + # [1.18.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.17.0...v1.18.0-rc.0) (2023-09-07) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/README.md b/packages/playground/README.md index d13566bbe4c0..81b3113c4ec4 100644 --- a/packages/playground/README.md +++ b/packages/playground/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Playground [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/playground/_stories/fiori/Bar/Bar.stories.ts b/packages/playground/_stories/fiori/Bar/Bar.stories.ts index b27b14c5f164..14abd8382a0f 100644 --- a/packages/playground/_stories/fiori/Bar/Bar.stories.ts +++ b/packages/playground/_stories/fiori/Bar/Bar.stories.ts @@ -34,7 +34,7 @@ const Template: UI5StoryArgs = (args) => html``; export const Basic = Template.bind({}); -Basic.storyName = "With Content and Design"; +Basic.storyName = "Basic"; Basic.args = { design: BarDesign.Header, startContent: ``, diff --git a/packages/playground/_stories/fiori/BarcodeScannerDialog/BarcodeScannerDialog.stories.ts b/packages/playground/_stories/fiori/BarcodeScannerDialog/BarcodeScannerDialog.stories.ts index 68185adad468..24689fe5ff0f 100644 --- a/packages/playground/_stories/fiori/BarcodeScannerDialog/BarcodeScannerDialog.stories.ts +++ b/packages/playground/_stories/fiori/BarcodeScannerDialog/BarcodeScannerDialog.stories.ts @@ -13,7 +13,7 @@ import type BarcodeScannerDialog from "@ui5/webcomponents-fiori/dist/BarcodeScan const component = "ui5-barcode-scanner-dialog"; export default { - title: "Fiori/BarcodeScannerDialog", + title: "Fiori/Barcode Scanner Dialog", component: "BarcodeScannerDialog", parameters: { docs: { diff --git a/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts b/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts index 2a34c00dcf78..69806c662672 100644 --- a/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts +++ b/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts @@ -27,7 +27,20 @@ export default { argTypes, } as Meta; -const Template: UI5StoryArgs = (args) => html` = (args) => html` + + = (args) => htm export const Basic = Template.bind({}); Basic.args = { default: `
    -

    Main Content

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.

    + Main Content +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.

    `, sideContent: `
    -

    Side Content

    -

    Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.

    + Side Content +

    Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.

    `, + sideContentVisibility: SideContentVisibility.AlwaysShow, }; - -export const Position = Template.bind({}); -Position.storyName = "Side Content Position"; -Position.args = { - sideContentPosition: SideContentPosition.Start, - default: `
    -

    Main Content

    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.

    -
    `, - sideContent: `
    -

    Side Content

    -

    Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.

    -
    `, -}; \ No newline at end of file diff --git a/packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts b/packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts index 4f8bdfcd51bb..c982cd93d9d5 100644 --- a/packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts +++ b/packages/playground/_stories/fiori/FlexibleColumnLayout/FlexibleColumnLayout.stories.ts @@ -14,7 +14,7 @@ import type FlexibleColumnLayout from "@ui5/webcomponents-fiori/dist/FlexibleCol const component = "ui5-flexible-column-layout"; export default { - title: "Fiori/FlexibleColumnLayout", + title: "Fiori/Flexible Column Layout", component: "FlexibleColumnLayout", parameters: { docs: { diff --git a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts index 33b183dc5301..628055d79ca6 100644 --- a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts +++ b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts @@ -15,7 +15,7 @@ import IllustrationMessageType from "@ui5/webcomponents-fiori/dist/types/Illustr const component = "ui5-illustrated-message"; export default { - title: "Fiori/IllustratedMessage", + title: "Fiori/Illustrated Message", component: "IllustratedMessage", parameters: { docs: { @@ -33,8 +33,9 @@ const Template: UI5StoryArgs = ( subtitle-text="${ifDefined(args.subtitleText)}" title-text="${ifDefined(args.titleText)}" accessible-name-ref="${ifDefined(args.accessibleNameRef)}" + title-level="${ifDefined(args.titleLevel)}" > - ${unsafeHTML(args.title)} + ${unsafeHTML(args.title)} ${unsafeHTML(args.subtitle)} ${unsafeHTML(args.default)} `; diff --git a/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts b/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts index 959e21aba306..dcb4006fce0f 100644 --- a/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts +++ b/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts @@ -1,7 +1,7 @@ import { html } from "lit"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import type { Meta } from "@storybook/web-components"; +import type { Meta, StoryFn } from "@storybook/web-components"; import type { PartialStoryFn } from "@storybook/types"; import argTypes, { componentInfo } from "./argTypes.js"; @@ -13,6 +13,7 @@ import { DocsPage } from "../../../.storybook/docs"; import MediaGallery from "@ui5/webcomponents-fiori/dist/MediaGallery.js"; import MediaGalleryLayout from "@ui5/webcomponents-fiori/dist/types/MediaGalleryLayout.js"; import MediaGalleryMenuHorizontalAlign from "@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuHorizontalAlign.js"; +import TemplateMediaGalleryTypes from "./TemplateMediaGalleryTypes.js"; const component = "ui5-media-gallery"; @@ -32,7 +33,7 @@ const stylesDecorator = (storyFn: PartialStoryFn) => html` `; export default { - title: "Fiori/MediaGallery", + title: "Fiori/Media Gallery", component: "MediaGallery", subcomponents: { MediaGalleryItem: "MediaGalleryItem" }, parameters: { @@ -82,71 +83,10 @@ Basic.args = { `, }; -export const WithVerticalLayout = Template.bind({}); -WithVerticalLayout.args = { - showAllThumbnails: true, - layout: MediaGalleryLayout.Vertical, - default: ` - - - - - - - - - - - - - - - - - - `, -}; - -export const WithThumbnailsOnTheRight = Template.bind({}); -WithThumbnailsOnTheRight.args = { - showAllThumbnails: true, - layout: MediaGalleryLayout.Horizontal, - menuHorizontalAlign: MediaGalleryMenuHorizontalAlign.Right, - default: ` - - - - - - - - - - - - - - - - - - `, -}; - -export const WithSeparateImageThumbnail = Template.bind({}); -WithSeparateImageThumbnail.args = { - default: ` - - - - `, -}; +export const Types: StoryFn = TemplateMediaGalleryTypes.bind({}); -export const WithVideoContent = Template.bind({}); -WithVideoContent.args = { +export const VideoContent = Template.bind({}); +VideoContent.args = { default: `