@duetds/components 4.34.2 → 4.35.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/hydrate/index.js +386 -25
- package/lib/cjs/duet-alert.cjs.entry.js +1 -1
- package/lib/cjs/duet-badge.cjs.entry.js +2 -2
- package/lib/cjs/duet-breadcrumb.cjs.entry.js +48 -0
- package/lib/cjs/duet-breadcrumbs.cjs.entry.js +68 -0
- package/lib/cjs/duet-button_2.cjs.entry.js +4 -3
- package/lib/cjs/duet-caption_4.cjs.entry.js +2 -2
- package/lib/cjs/duet-card.cjs.entry.js +1 -1
- package/lib/cjs/duet-checkbox.cjs.entry.js +1 -1
- package/lib/cjs/duet-choice_2.cjs.entry.js +2 -2
- package/lib/cjs/duet-collapsible.cjs.entry.js +1 -1
- package/lib/cjs/duet-cookie-consent.cjs.entry.js +1 -1
- package/lib/cjs/duet-date-picker.cjs.entry.js +2 -2
- package/lib/cjs/duet-divider_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-editable-table-button.cjs.entry.js +1 -1
- package/lib/cjs/duet-editable-table_4.cjs.entry.js +12 -3
- package/lib/cjs/duet-empty-state.cjs.entry.js +1 -1
- package/lib/cjs/duet-fieldset.cjs.entry.js +1 -1
- package/lib/cjs/duet-footer.cjs.entry.js +1 -1
- package/lib/cjs/duet-grid_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-header_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-hero.cjs.entry.js +1 -1
- package/lib/cjs/duet-icon.cjs.entry.js +1 -1
- package/lib/cjs/duet-input_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-layout.cjs.entry.js +1 -1
- package/lib/cjs/duet-list_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-modal.cjs.entry.js +15 -3
- package/lib/cjs/duet-notification_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-number-input.cjs.entry.js +1 -1
- package/lib/cjs/duet-progress.cjs.entry.js +1 -1
- package/lib/cjs/duet-radio_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-range-slider.cjs.entry.js +1 -1
- package/lib/cjs/duet-scrollable_3.cjs.entry.js +414 -0
- package/lib/cjs/duet-select.cjs.entry.js +1 -1
- package/lib/cjs/duet-step_2.cjs.entry.js +1 -1
- package/lib/cjs/duet-textarea.cjs.entry.js +1 -1
- package/lib/cjs/duet-toggle.cjs.entry.js +1 -1
- package/lib/cjs/duet-tooltip.cjs.entry.js +1 -1
- package/lib/cjs/duet-tray.cjs.entry.js +1 -1
- package/lib/cjs/duet-upload-aria-status.cjs.entry.js +1 -1
- package/lib/cjs/duet-visually-hidden.cjs.entry.js +1 -1
- package/lib/cjs/duet.cjs.js +2 -2
- package/lib/cjs/{focus-utils-b57facfe.js → focus-utils-e1efc65c.js} +1 -1
- package/lib/cjs/{index-e2021bf7.js → index-6128deac.js} +1 -1
- package/lib/cjs/loader.cjs.js +2 -2
- package/lib/collection/collection-manifest.json +10 -6
- package/lib/collection/components/duet-badge/duet-badge.js +1 -1
- package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.css +57 -0
- package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js +131 -0
- package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.css +63 -0
- package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.js +104 -0
- package/lib/collection/components/duet-button/duet-button.css +22 -4
- package/lib/collection/components/duet-button/duet-button.js +6 -2
- package/lib/collection/components/duet-link/duet-link.js +1 -1
- package/lib/collection/components/duet-modal/duet-modal.js +33 -3
- package/lib/collection/components/duet-scrollable/duet-scrollable.css +83 -0
- package/lib/collection/components/duet-scrollable/duet-scrollable.js +240 -0
- package/lib/collection/components/duet-tab/duet-tab.js +63 -1
- package/lib/collection/components/duet-tab-group/duet-tab-group.css +12 -13
- package/lib/collection/components/duet-tab-group/duet-tab-group.js +101 -16
- package/lib/collection/components/duet-upload/duet-upload.js +32 -4
- package/lib/custom-elements-bundle/index.d.ts +18 -0
- package/lib/custom-elements-bundle/index.js +356 -29
- package/lib/duet/duet.esm.js +1 -1
- package/lib/duet/duet.js +1 -1
- package/lib/duet/p-00b447fe.entry.js +4 -0
- package/lib/duet/{p-69133107.system.entry.js → p-02f369f0.system.entry.js} +1 -1
- package/lib/duet/{p-d3b5d2ef.system.entry.js → p-03bb1f47.system.entry.js} +1 -1
- package/lib/duet/{p-c67a63cc.system.entry.js → p-0569a7ac.system.entry.js} +1 -1
- package/lib/duet/{p-f7f4f98a.system.entry.js → p-08e5b6ec.system.entry.js} +1 -1
- package/lib/duet/{p-75261615.system.entry.js → p-096c0b9e.system.entry.js} +1 -1
- package/lib/duet/{p-7a0a375e.system.entry.js → p-09ba1ab9.system.entry.js} +2 -2
- package/lib/duet/{p-ddbdac54.entry.js → p-0d9989c5.entry.js} +1 -1
- package/lib/duet/{p-8b01f978.system.entry.js → p-0f20c5c4.system.entry.js} +1 -1
- package/lib/duet/{p-a900d55b.entry.js → p-1229b08d.entry.js} +1 -1
- package/lib/duet/{p-2524481a.system.entry.js → p-1b0b462f.system.entry.js} +1 -1
- package/lib/duet/{p-f01494f9.system.entry.js → p-1b134dc3.system.entry.js} +1 -1
- package/lib/duet/p-1fbcd741.entry.js +4 -0
- package/lib/duet/{p-8d42cb7c.entry.js → p-26ab4386.entry.js} +1 -1
- package/lib/duet/{p-08d1abc7.entry.js → p-29d1e8dc.entry.js} +1 -1
- package/lib/duet/{p-4a742d83.entry.js → p-2c8d7bbb.entry.js} +1 -1
- package/lib/duet/{p-5c67bb73.system.entry.js → p-2cc5934d.system.entry.js} +1 -1
- package/lib/duet/{p-8e16057d.system.entry.js → p-2dcc9779.system.entry.js} +1 -1
- package/lib/duet/{p-e1c6f74b.entry.js → p-30cde172.entry.js} +1 -1
- package/lib/duet/{p-e0038277.system.entry.js → p-34381bd0.system.entry.js} +1 -1
- package/lib/duet/{p-baef2241.entry.js → p-39d4e2d4.entry.js} +1 -1
- package/lib/duet/{p-488addbc.entry.js → p-3cc68d7d.entry.js} +1 -1
- package/lib/duet/{p-e242bf98.entry.js → p-3e67d7a2.entry.js} +1 -1
- package/lib/duet/{p-354bf924.entry.js → p-3ea21701.entry.js} +1 -1
- package/lib/duet/{p-c50bbff5.entry.js → p-3f2ac2e1.entry.js} +1 -1
- package/lib/duet/{p-5f2fb5db.entry.js → p-3f954a67.entry.js} +1 -1
- package/lib/duet/{p-a52d436c.entry.js → p-41019921.entry.js} +1 -1
- package/lib/duet/{p-c6ba80c6.entry.js → p-47986fa6.entry.js} +1 -1
- package/lib/duet/{p-ee74ff67.entry.js → p-482f91b0.entry.js} +1 -1
- package/lib/duet/p-4ac19266.entry.js +4 -0
- package/lib/duet/{p-ae8401c9.system.entry.js → p-4cdfa148.system.entry.js} +1 -1
- package/lib/duet/{p-939bf739.system.entry.js → p-4e0cca44.system.entry.js} +1 -1
- package/lib/duet/{p-f6e1fb0f.system.entry.js → p-4e588759.system.entry.js} +1 -1
- package/lib/duet/{p-5f866721.entry.js → p-4eda81b6.entry.js} +1 -1
- package/lib/duet/{p-ae46a7d2.system.entry.js → p-4f77c165.system.entry.js} +1 -1
- package/lib/duet/{p-4d5531be.entry.js → p-58832650.entry.js} +1 -1
- package/lib/duet/p-638ec570.system.entry.js +4 -0
- package/lib/duet/{p-f3c258d8.system.entry.js → p-65d61e92.system.entry.js} +1 -1
- package/lib/duet/p-66ada8c2.system.entry.js +4 -0
- package/lib/duet/{p-ec5d0cda.entry.js → p-6994cca1.entry.js} +1 -1
- package/lib/duet/p-6bbe6707.entry.js +4 -0
- package/lib/duet/{p-62de4645.system.entry.js → p-6bc17eac.system.entry.js} +1 -1
- package/lib/duet/{p-9849a4ab.system.entry.js → p-73cd52c3.system.entry.js} +1 -1
- package/lib/duet/{p-db87c4b1.system.entry.js → p-75d53642.system.entry.js} +1 -1
- package/lib/duet/{p-1fff32a9.system.entry.js → p-796becd9.system.entry.js} +1 -1
- package/lib/duet/{p-e3973f41.system.js → p-7d3a5621.system.js} +1 -1
- package/lib/duet/{p-3998eed6.entry.js → p-8040cc39.entry.js} +1 -1
- package/lib/duet/{p-45a6838d.system.entry.js → p-821da899.system.entry.js} +1 -1
- package/lib/duet/{p-b70f164d.entry.js → p-85170cb2.entry.js} +1 -1
- package/lib/duet/{p-90e7e876.entry.js → p-8a4a55a9.entry.js} +1 -1
- package/lib/duet/{p-3e0a774d.entry.js → p-905e62f0.entry.js} +1 -1
- package/lib/duet/{p-2862054c.entry.js → p-93bd2040.entry.js} +1 -1
- package/lib/duet/{p-13d5fe80.system.entry.js → p-9b56c174.system.entry.js} +1 -1
- package/lib/duet/{p-cdaa629d.system.entry.js → p-9b7a869e.system.entry.js} +1 -1
- package/lib/duet/{p-9793f3d8.entry.js → p-9d1ac81f.entry.js} +1 -1
- package/lib/duet/p-9ee29b96.js +4 -0
- package/lib/duet/{p-a58f0665.system.entry.js → p-9f53bfcc.system.entry.js} +1 -1
- package/lib/duet/{p-0dc01111.system.entry.js → p-a13cceae.system.entry.js} +1 -1
- package/lib/duet/p-a28308b5.entry.js +4 -0
- package/lib/duet/{p-de23ae41.entry.js → p-a5082840.entry.js} +1 -1
- package/lib/duet/{p-5f813e15.entry.js → p-a5d1c883.entry.js} +1 -1
- package/lib/duet/{p-58d7f2d1.entry.js → p-a5f67f2f.entry.js} +1 -1
- package/lib/duet/{p-5e03b63f.system.entry.js → p-ac525a17.system.entry.js} +1 -1
- package/lib/duet/p-ae5596da.js +4 -0
- package/lib/duet/{p-b8dde0c8.system.entry.js → p-af38d5b2.system.entry.js} +1 -1
- package/lib/duet/{p-0e742087.system.entry.js → p-b4fd3539.system.entry.js} +1 -1
- package/lib/duet/{p-f9a096a9.system.entry.js → p-b63dad81.system.entry.js} +1 -1
- package/lib/duet/p-b9bb03cb.system.js +4 -0
- package/lib/duet/{p-eed6f9cc.system.entry.js → p-bae3ae1d.system.entry.js} +1 -1
- package/lib/duet/{p-6a8b3cf0.system.entry.js → p-bf35379f.system.entry.js} +1 -1
- package/lib/duet/{p-72ad7798.entry.js → p-cc916a11.entry.js} +1 -1
- package/lib/duet/{p-4db07868.entry.js → p-d09f2dd8.entry.js} +1 -1
- package/lib/duet/{p-00bf3bbb.system.entry.js → p-d87aa545.system.entry.js} +1 -1
- package/lib/duet/{p-3e47c910.entry.js → p-da6aa538.entry.js} +1 -1
- package/lib/duet/p-ddda5f80.system.js +4 -0
- package/lib/duet/{p-760d2226.entry.js → p-e14ab836.entry.js} +1 -1
- package/lib/duet/{p-582f9135.system.entry.js → p-e193d6f7.system.entry.js} +1 -1
- package/lib/duet/{p-3e273d8d.entry.js → p-e4ebd229.entry.js} +1 -1
- package/lib/duet/{p-ffd449ef.system.entry.js → p-e5224000.system.entry.js} +1 -1
- package/lib/duet/{p-66c35cd2.entry.js → p-ec3cf4d1.entry.js} +1 -1
- package/lib/duet/{p-12941c46.system.entry.js → p-edcd137c.system.entry.js} +1 -1
- package/lib/duet/p-ee13c2e9.system.entry.js +4 -0
- package/lib/duet/{p-4836f66d.entry.js → p-f1013864.entry.js} +1 -1
- package/lib/duet/{p-5a5e7977.entry.js → p-f10d3f3d.entry.js} +1 -1
- package/lib/duet/p-f863e4f8.system.entry.js +4 -0
- package/lib/esm/duet-alert.entry.js +1 -1
- package/lib/esm/duet-badge.entry.js +2 -2
- package/lib/esm/duet-breadcrumb.entry.js +44 -0
- package/lib/esm/duet-breadcrumbs.entry.js +64 -0
- package/lib/esm/duet-button_2.entry.js +4 -3
- package/lib/esm/duet-caption_4.entry.js +2 -2
- package/lib/esm/duet-card.entry.js +1 -1
- package/lib/esm/duet-checkbox.entry.js +1 -1
- package/lib/esm/duet-choice_2.entry.js +2 -2
- package/lib/esm/duet-collapsible.entry.js +1 -1
- package/lib/esm/duet-cookie-consent.entry.js +1 -1
- package/lib/esm/duet-date-picker.entry.js +2 -2
- package/lib/esm/duet-divider_2.entry.js +1 -1
- package/lib/esm/duet-editable-table-button.entry.js +1 -1
- package/lib/esm/duet-editable-table_4.entry.js +12 -3
- package/lib/esm/duet-empty-state.entry.js +1 -1
- package/lib/esm/duet-fieldset.entry.js +1 -1
- package/lib/esm/duet-footer.entry.js +1 -1
- package/lib/esm/duet-grid_2.entry.js +1 -1
- package/lib/esm/duet-header_2.entry.js +1 -1
- package/lib/esm/duet-hero.entry.js +1 -1
- package/lib/esm/duet-icon.entry.js +1 -1
- package/lib/esm/duet-input_2.entry.js +1 -1
- package/lib/esm/duet-layout.entry.js +1 -1
- package/lib/esm/duet-list_2.entry.js +1 -1
- package/lib/esm/duet-modal.entry.js +15 -3
- package/lib/esm/duet-notification_2.entry.js +1 -1
- package/lib/esm/duet-number-input.entry.js +1 -1
- package/lib/esm/duet-progress.entry.js +1 -1
- package/lib/esm/duet-radio_2.entry.js +1 -1
- package/lib/esm/duet-range-slider.entry.js +1 -1
- package/lib/esm/duet-scrollable_3.entry.js +408 -0
- package/lib/esm/duet-select.entry.js +1 -1
- package/lib/esm/duet-step_2.entry.js +1 -1
- package/lib/esm/duet-textarea.entry.js +1 -1
- package/lib/esm/duet-toggle.entry.js +1 -1
- package/lib/esm/duet-tooltip.entry.js +1 -1
- package/lib/esm/duet-tray.entry.js +1 -1
- package/lib/esm/duet-upload-aria-status.entry.js +1 -1
- package/lib/esm/duet-visually-hidden.entry.js +1 -1
- package/lib/esm/duet.js +2 -2
- package/lib/esm/{focus-utils-fc14cf36.js → focus-utils-5b40a8be.js} +1 -1
- package/lib/esm/{index-9ef5d3bc.js → index-795979f3.js} +1 -1
- package/lib/esm/loader.js +2 -2
- package/lib/esm-es5/duet-alert.entry.js +1 -1
- package/lib/esm-es5/duet-badge.entry.js +1 -1
- package/lib/esm-es5/duet-breadcrumb.entry.js +4 -0
- package/lib/esm-es5/duet-breadcrumbs.entry.js +4 -0
- package/lib/esm-es5/duet-button_2.entry.js +1 -1
- package/lib/esm-es5/duet-caption_4.entry.js +1 -1
- package/lib/esm-es5/duet-card.entry.js +1 -1
- package/lib/esm-es5/duet-checkbox.entry.js +1 -1
- package/lib/esm-es5/duet-choice_2.entry.js +1 -1
- package/lib/esm-es5/duet-collapsible.entry.js +1 -1
- package/lib/esm-es5/duet-cookie-consent.entry.js +1 -1
- package/lib/esm-es5/duet-date-picker.entry.js +1 -1
- package/lib/esm-es5/duet-divider_2.entry.js +1 -1
- package/lib/esm-es5/duet-editable-table-button.entry.js +1 -1
- package/lib/esm-es5/duet-editable-table_4.entry.js +1 -1
- package/lib/esm-es5/duet-empty-state.entry.js +1 -1
- package/lib/esm-es5/duet-fieldset.entry.js +1 -1
- package/lib/esm-es5/duet-footer.entry.js +1 -1
- package/lib/esm-es5/duet-grid_2.entry.js +1 -1
- package/lib/esm-es5/duet-header_2.entry.js +1 -1
- package/lib/esm-es5/duet-hero.entry.js +1 -1
- package/lib/esm-es5/duet-icon.entry.js +1 -1
- package/lib/esm-es5/duet-input_2.entry.js +1 -1
- package/lib/esm-es5/duet-layout.entry.js +1 -1
- package/lib/esm-es5/duet-list_2.entry.js +1 -1
- package/lib/esm-es5/duet-modal.entry.js +1 -1
- package/lib/esm-es5/duet-notification_2.entry.js +1 -1
- package/lib/esm-es5/duet-number-input.entry.js +1 -1
- package/lib/esm-es5/duet-progress.entry.js +1 -1
- package/lib/esm-es5/duet-radio_2.entry.js +1 -1
- package/lib/esm-es5/duet-range-slider.entry.js +1 -1
- package/lib/esm-es5/duet-scrollable_3.entry.js +4 -0
- package/lib/esm-es5/duet-select.entry.js +1 -1
- package/lib/esm-es5/duet-step_2.entry.js +1 -1
- package/lib/esm-es5/duet-textarea.entry.js +1 -1
- package/lib/esm-es5/duet-toggle.entry.js +1 -1
- package/lib/esm-es5/duet-tooltip.entry.js +1 -1
- package/lib/esm-es5/duet-tray.entry.js +1 -1
- package/lib/esm-es5/duet-upload-aria-status.entry.js +1 -1
- package/lib/esm-es5/duet-visually-hidden.entry.js +1 -1
- package/lib/esm-es5/duet.js +1 -1
- package/lib/esm-es5/focus-utils-5b40a8be.js +4 -0
- package/lib/esm-es5/index-795979f3.js +4 -0
- package/lib/esm-es5/loader.js +1 -1
- package/lib/types/components/duet-badge/duet-badge.d.ts +1 -1
- package/lib/types/components/duet-breadcrumbs/duet-breadcrumb.d.ts +31 -0
- package/lib/types/components/duet-breadcrumbs/duet-breadcrumbs.d.ts +23 -0
- package/lib/types/components/duet-button/duet-button.d.ts +2 -1
- package/lib/types/components/duet-modal/duet-modal.d.ts +5 -1
- package/lib/types/components/duet-scrollable/duet-scrollable.d.ts +51 -0
- package/lib/types/components/duet-tab/duet-tab.d.ts +11 -0
- package/lib/types/components/duet-tab-group/duet-tab-group.d.ts +15 -0
- package/lib/types/components/duet-upload/duet-upload.d.ts +9 -0
- package/lib/types/components.d.ts +162 -1
- package/package.json +6 -5
- package/lib/cjs/duet-tab_2.cjs.entry.js +0 -213
- package/lib/duet/p-13bc14a6.system.js +0 -4
- package/lib/duet/p-30d13a27.system.js +0 -4
- package/lib/duet/p-60aa83c0.js +0 -4
- package/lib/duet/p-746b3bee.entry.js +0 -4
- package/lib/duet/p-9d487a0d.entry.js +0 -4
- package/lib/duet/p-c92b1af1.system.entry.js +0 -4
- package/lib/duet/p-ce566b2b.js +0 -4
- package/lib/duet/p-d1adeb76.entry.js +0 -4
- package/lib/duet/p-f2c402a9.system.entry.js +0 -4
- package/lib/esm/duet-tab_2.entry.js +0 -208
- package/lib/esm-es5/duet-tab_2.entry.js +0 -4
- package/lib/esm-es5/focus-utils-fc14cf36.js +0 -4
- package/lib/esm-es5/index-9ef5d3bc.js +0 -4
- package/lib/html.html-data.json +0 -4925
|
@@ -0,0 +1,414 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Built with Duet Design System
|
|
3
|
+
*/
|
|
4
|
+
'use strict';
|
|
5
|
+
|
|
6
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
|
+
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
|
+
const themeableComponent = require('./themeable-component-0c1be552.js');
|
|
10
|
+
const languageUtils = require('./language-utils-aa282901.js');
|
|
11
|
+
const createId = require('./create-id-c3b984b1.js');
|
|
12
|
+
const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
|
|
13
|
+
require('./string-utils-267e3dbb.js');
|
|
14
|
+
|
|
15
|
+
const duetScrollableCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{display:none}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
|
|
16
|
+
|
|
17
|
+
let DuetScrollable = class {
|
|
18
|
+
constructor(hostRef) {
|
|
19
|
+
index.registerInstance(this, hostRef);
|
|
20
|
+
/**
|
|
21
|
+
* Private variables and constants index
|
|
22
|
+
*/
|
|
23
|
+
this.currentIndex = 0;
|
|
24
|
+
this.tabListElement = undefined;
|
|
25
|
+
this.tabListClass = "duet-scrollable-list";
|
|
26
|
+
this.tablistAtStart = true;
|
|
27
|
+
this.isTabContentSmallerThanWrapper = false;
|
|
28
|
+
this.tablistAtEnd = false;
|
|
29
|
+
this.childrenData = {};
|
|
30
|
+
this.resizeObserver = new ResizeObserver(entries => {
|
|
31
|
+
var _a, _b, _c, _d;
|
|
32
|
+
// otherwise, something is wrong, expecting 1 element only
|
|
33
|
+
if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
|
|
34
|
+
const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
|
|
35
|
+
const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
|
|
36
|
+
// in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
|
|
37
|
+
this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
/**
|
|
41
|
+
* Theme of duet-tab-scrollable. When used this will override the color setting and
|
|
42
|
+
* use "primary" or "primary-turva" as the color depending on which theme
|
|
43
|
+
* is chosen.
|
|
44
|
+
*/
|
|
45
|
+
this.theme = "";
|
|
46
|
+
/**
|
|
47
|
+
* Optional identifier to add to buttons in the tab group
|
|
48
|
+
*/
|
|
49
|
+
this.identifier = "";
|
|
50
|
+
/**
|
|
51
|
+
* Selected element
|
|
52
|
+
*/
|
|
53
|
+
this.selected = 0;
|
|
54
|
+
}
|
|
55
|
+
watchPropHandler(newValue) {
|
|
56
|
+
this.scrollToTab(newValue, "center");
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* Component lifecycle events.
|
|
60
|
+
*/
|
|
61
|
+
componentWillLoad() {
|
|
62
|
+
themeableComponent.inheritGlobalTheme(this);
|
|
63
|
+
const slotted = this.host.children;
|
|
64
|
+
this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
|
|
65
|
+
}
|
|
66
|
+
componentDidLoad() {
|
|
67
|
+
this.resizeObserver.observe(this.tabListElement);
|
|
68
|
+
}
|
|
69
|
+
disconnectedCallback() {
|
|
70
|
+
this.resizeObserver.disconnect();
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Private methods.
|
|
74
|
+
*/
|
|
75
|
+
getLastVisibleElement() {
|
|
76
|
+
const clientWidth = this.tabListElement.clientWidth;
|
|
77
|
+
const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
|
|
78
|
+
return xValues;
|
|
79
|
+
}
|
|
80
|
+
getFirstVisibleElement() {
|
|
81
|
+
const buttonCollection = this.host.querySelectorAll("button");
|
|
82
|
+
// reverse the array because we want the first invisible element form the middle, not the first in the list
|
|
83
|
+
const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
|
|
84
|
+
const xValues = arrayOfXValues.findIndex(element => {
|
|
85
|
+
return element > 0;
|
|
86
|
+
});
|
|
87
|
+
return xValues;
|
|
88
|
+
}
|
|
89
|
+
updateScrollButtons(container = this.tabListElement) {
|
|
90
|
+
if (container.scrollLeft <= 0) {
|
|
91
|
+
this.tablistAtStart = true;
|
|
92
|
+
}
|
|
93
|
+
else if (container.scrollLeft > 0) {
|
|
94
|
+
this.tablistAtStart = false;
|
|
95
|
+
}
|
|
96
|
+
if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
|
|
97
|
+
this.tablistAtEnd = true;
|
|
98
|
+
}
|
|
99
|
+
else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
|
|
100
|
+
this.tablistAtEnd = false;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
scrollToTab(index = this.currentIndex, inline) {
|
|
104
|
+
if (!this.childrenData.hasChildren) {
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
if (index + 1 >= this.childrenData.numberOfChildren) {
|
|
108
|
+
index = this.childrenData.numberOfChildren - 1;
|
|
109
|
+
}
|
|
110
|
+
if (index < 0) {
|
|
111
|
+
index = 0;
|
|
112
|
+
}
|
|
113
|
+
const buttons = this.host.querySelectorAll("button");
|
|
114
|
+
// store previous position
|
|
115
|
+
let prevPosition = buttons[0].getBoundingClientRect().x;
|
|
116
|
+
// iterations to run
|
|
117
|
+
let ticksWhereScrollDidNotHappen = 5;
|
|
118
|
+
const getAnimationFrame = () => {
|
|
119
|
+
// if we get the same value enter the logic loop
|
|
120
|
+
if (buttons[0].getBoundingClientRect().x === prevPosition) {
|
|
121
|
+
ticksWhereScrollDidNotHappen--;
|
|
122
|
+
// When iteration is not complete run the calculation again
|
|
123
|
+
if (ticksWhereScrollDidNotHappen !== 0) {
|
|
124
|
+
window.requestAnimationFrame(getAnimationFrame);
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
this.updateScrollButtons();
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
window.requestAnimationFrame(getAnimationFrame);
|
|
131
|
+
prevPosition = buttons[0].getBoundingClientRect().x;
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
buttons[index].scrollIntoView({ behavior: "smooth", inline });
|
|
135
|
+
window.requestAnimationFrame(getAnimationFrame);
|
|
136
|
+
}
|
|
137
|
+
scrollLeft() {
|
|
138
|
+
this.tablistAtEnd = false;
|
|
139
|
+
const first = this.getFirstVisibleElement() - 1;
|
|
140
|
+
this.scrollToTab(first, "center");
|
|
141
|
+
}
|
|
142
|
+
scrollRight() {
|
|
143
|
+
this.tablistAtStart = false;
|
|
144
|
+
const last = this.getLastVisibleElement() + 1;
|
|
145
|
+
this.scrollToTab(last, "center");
|
|
146
|
+
}
|
|
147
|
+
/**
|
|
148
|
+
* render() function
|
|
149
|
+
* Always the last one in the class.
|
|
150
|
+
*/
|
|
151
|
+
render() {
|
|
152
|
+
return (index.h(index.Host, { class: {
|
|
153
|
+
"duet-theme-turva": this.theme === "turva",
|
|
154
|
+
"duet-theme-default": this.theme === "default",
|
|
155
|
+
} }, index.h("div", { class: "duet-scrollable-items" }, index.h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
|
|
156
|
+
"duet-scrollable-button": true,
|
|
157
|
+
"duet-scrollable-button--left": true,
|
|
158
|
+
"duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
|
|
159
|
+
}, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1" }, index.h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), index.h("div", { class: this.tabListClass, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, index.h("slot", null)), index.h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
|
|
160
|
+
"duet-scrollable-button": true,
|
|
161
|
+
"duet-scrollable-button--right": true,
|
|
162
|
+
"duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
|
|
163
|
+
}, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1" }, index.h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
|
|
164
|
+
}
|
|
165
|
+
get host() { return index.getElement(this); }
|
|
166
|
+
static get watchers() { return {
|
|
167
|
+
"selected": ["watchPropHandler"]
|
|
168
|
+
}; }
|
|
169
|
+
};
|
|
170
|
+
DuetScrollable.style = duetScrollableCss;
|
|
171
|
+
|
|
172
|
+
const duetTabCss = ".sc-duet-tab-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-tab.sc-duet-tab{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:none;width:100%}.duet-tab.selected.sc-duet-tab{display:block}";
|
|
173
|
+
|
|
174
|
+
let DuetTab = class {
|
|
175
|
+
constructor(hostRef) {
|
|
176
|
+
index.registerInstance(this, hostRef);
|
|
177
|
+
/**
|
|
178
|
+
* Defaults for AccessibleLabel
|
|
179
|
+
* @default null
|
|
180
|
+
*/
|
|
181
|
+
this.accessibleDescriptionDefault = null;
|
|
182
|
+
/**
|
|
183
|
+
* String for AccessibleLabel
|
|
184
|
+
* @default null
|
|
185
|
+
*/
|
|
186
|
+
this.accessibleDescription = this.accessibleDescriptionDefault
|
|
187
|
+
? languageUtils.getLocaleString(this.accessibleDescriptionDefault)
|
|
188
|
+
: null;
|
|
189
|
+
}
|
|
190
|
+
/**
|
|
191
|
+
* render() function
|
|
192
|
+
* Always the last one in the class.
|
|
193
|
+
*/
|
|
194
|
+
render() {
|
|
195
|
+
{
|
|
196
|
+
return (index.h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription }, index.h("slot", null)));
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
DuetTab.style = duetTabCss;
|
|
201
|
+
|
|
202
|
+
const duetTabGroupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:block}}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:#e4e4e6}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.1;color:#00294d;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-theme-turva .duet-tab-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#e4e4e6}.duet-tab-button.duet-p-0{padding:0 !important}@media (min-width: 36em){.duet-tab-button{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button:hover{z-index:200;border-color:#909599}.duet-theme-turva .duet-tab-button:hover{border-color:#747475}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:white;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:white;background-color:#171c3a;border-color:#171c3a}.duet-tab-button:focus{z-index:200;outline:0}:host(.user-is-tabbing) .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-tab-variation-plain .duet-tab-button.selected{color:#0077b3;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:#c60c30;border-bottom-color:#c60c30}.duet-tab-group-content{position:relative;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#00294d;text-align:left}.duet-theme-turva .duet-tab-group-content{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
|
|
203
|
+
|
|
204
|
+
let DuetTabGroup = class {
|
|
205
|
+
constructor(hostRef) {
|
|
206
|
+
index.registerInstance(this, hostRef);
|
|
207
|
+
this.duetChange = index.createEvent(this, "duetChange", 3);
|
|
208
|
+
this.duetTabChange = index.createEvent(this, "duetTabChange", 7);
|
|
209
|
+
this.id = createId.createID("DuetTabGroup");
|
|
210
|
+
/**
|
|
211
|
+
* State() variables
|
|
212
|
+
* Inlined decorator, alphabetical order.
|
|
213
|
+
*/
|
|
214
|
+
this.tabs = [];
|
|
215
|
+
this.selected = 0;
|
|
216
|
+
/**
|
|
217
|
+
* Theme of the component.
|
|
218
|
+
*/
|
|
219
|
+
this.theme = "";
|
|
220
|
+
/**
|
|
221
|
+
* Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),
|
|
222
|
+
* if this is a number instead of true it will be used as "amount of items to scroll"
|
|
223
|
+
*/
|
|
224
|
+
this.scrolls = false;
|
|
225
|
+
/**
|
|
226
|
+
* Whether the tab-group collapses to a select dropwdown in minor breakpoints
|
|
227
|
+
*/
|
|
228
|
+
this.collapses = true;
|
|
229
|
+
/**
|
|
230
|
+
* Style variation of the tab group.
|
|
231
|
+
*/
|
|
232
|
+
this.variation = "default";
|
|
233
|
+
/**
|
|
234
|
+
* The currently active language. This setting changes the accessible labels to match the
|
|
235
|
+
* chosen language.
|
|
236
|
+
* @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
|
|
237
|
+
* @default "fi"
|
|
238
|
+
*/
|
|
239
|
+
this.language = languageUtils.getLanguage();
|
|
240
|
+
/**
|
|
241
|
+
* Defaults for Label
|
|
242
|
+
* @default {fi: "Valitse", en: "Choose", sv: "Välja"}
|
|
243
|
+
*/
|
|
244
|
+
this.labelDefaults = {
|
|
245
|
+
fi: "Valitse",
|
|
246
|
+
en: "Choose",
|
|
247
|
+
sv: "Välj",
|
|
248
|
+
};
|
|
249
|
+
/**
|
|
250
|
+
* Label for the select element which gets shown on mobile.
|
|
251
|
+
* @default {fi: "Valitse", en: "Choose", sv: "Välja"}
|
|
252
|
+
*/
|
|
253
|
+
this.label = languageUtils.getLocaleString(this.labelDefaults, this.language);
|
|
254
|
+
/**
|
|
255
|
+
* Determines whether the label for the select element shown on mobile is visually hidden.
|
|
256
|
+
*/
|
|
257
|
+
this.labelHidden = true;
|
|
258
|
+
/**
|
|
259
|
+
* Optional identifier to add to buttons in the tab group
|
|
260
|
+
*/
|
|
261
|
+
this.identifier = this.id;
|
|
262
|
+
/**
|
|
263
|
+
* Controls the margin of the component.
|
|
264
|
+
*/
|
|
265
|
+
this.margin = "auto";
|
|
266
|
+
/**
|
|
267
|
+
* Controls the padding of the component.
|
|
268
|
+
*/
|
|
269
|
+
this.padding = "auto";
|
|
270
|
+
/**
|
|
271
|
+
* Component event handling.
|
|
272
|
+
*/
|
|
273
|
+
this.handleKeyDown = ev => {
|
|
274
|
+
let button;
|
|
275
|
+
if (keyboardUtils.isArrowLeftKey(ev) || keyboardUtils.isArrowUpKey(ev)) {
|
|
276
|
+
button = ev.target.previousElementSibling;
|
|
277
|
+
}
|
|
278
|
+
else if (keyboardUtils.isArrowRightKey(ev) || keyboardUtils.isArrowDownKey(ev)) {
|
|
279
|
+
button = ev.target.nextElementSibling;
|
|
280
|
+
}
|
|
281
|
+
if (button) {
|
|
282
|
+
ev.preventDefault();
|
|
283
|
+
button.click();
|
|
284
|
+
button.focus();
|
|
285
|
+
}
|
|
286
|
+
};
|
|
287
|
+
this.renderTab = () => {
|
|
288
|
+
const renderedTabs = this.tabs.map((element, index$1) => {
|
|
289
|
+
return (index.h("button", { role: "tab", id: this.getButtonId(index$1), "aria-controls": this.getTabId(index$1), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index$1), part: `${this.identifier}-button`, type: "button", class: {
|
|
290
|
+
"duet-p-0": this.padding === "none",
|
|
291
|
+
"duet-tab-button": true,
|
|
292
|
+
selected: element.selected,
|
|
293
|
+
}, onClick: () => this.openTab(index$1), onKeyDown: ev => this.handleKeyDown(ev) }, element.label));
|
|
294
|
+
});
|
|
295
|
+
if (this.scrolls) {
|
|
296
|
+
return (index.h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
|
|
297
|
+
}
|
|
298
|
+
return renderedTabs;
|
|
299
|
+
};
|
|
300
|
+
}
|
|
301
|
+
/**
|
|
302
|
+
* Component lifecycle events.
|
|
303
|
+
*/
|
|
304
|
+
async connectedCallback() {
|
|
305
|
+
if (typeof MutationObserver !== "undefined") {
|
|
306
|
+
this.mutationO = new MutationObserver(() => {
|
|
307
|
+
this.updateTabs();
|
|
308
|
+
});
|
|
309
|
+
this.mutationO.observe(this.element, {
|
|
310
|
+
attributes: true,
|
|
311
|
+
attributeFilter: ["label"],
|
|
312
|
+
childList: true,
|
|
313
|
+
characterData: true,
|
|
314
|
+
subtree: true,
|
|
315
|
+
});
|
|
316
|
+
}
|
|
317
|
+
await this.updateTabs();
|
|
318
|
+
}
|
|
319
|
+
disconnectedCallback() {
|
|
320
|
+
if (this.mutationO) {
|
|
321
|
+
this.mutationO.disconnect();
|
|
322
|
+
this.mutationO = undefined;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
componentWillLoad() {
|
|
326
|
+
themeableComponent.inheritGlobalTheme(this);
|
|
327
|
+
}
|
|
328
|
+
/**
|
|
329
|
+
* This method allows you to open any of the tabs by calling the method and
|
|
330
|
+
* passing the index of the tab. Please note that index starts from zero.
|
|
331
|
+
*/
|
|
332
|
+
async openTab(tabIndex) {
|
|
333
|
+
if (tabIndex >= this.tabs.length) {
|
|
334
|
+
throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
|
|
335
|
+
}
|
|
336
|
+
this.selected = tabIndex;
|
|
337
|
+
this.tabs.forEach((tab, i) => {
|
|
338
|
+
tab.selected = i === tabIndex;
|
|
339
|
+
});
|
|
340
|
+
const event = {
|
|
341
|
+
value: tabIndex,
|
|
342
|
+
component: "duet-tab-group",
|
|
343
|
+
};
|
|
344
|
+
this.duetChange.emit(event);
|
|
345
|
+
this.duetTabChange.emit(event);
|
|
346
|
+
}
|
|
347
|
+
/**
|
|
348
|
+
* This method used to refresh the contents of the tab group
|
|
349
|
+
* but is now deprecated as this is done automatically.
|
|
350
|
+
* @deprecated
|
|
351
|
+
*/
|
|
352
|
+
async refresh() {
|
|
353
|
+
console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
|
|
354
|
+
}
|
|
355
|
+
/**
|
|
356
|
+
* Local methods.
|
|
357
|
+
*/
|
|
358
|
+
getTabs() {
|
|
359
|
+
const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
|
|
360
|
+
const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
|
|
361
|
+
if (localTabs.length === 0) {
|
|
362
|
+
throw new Error("[duet-tabs] Must have at least one tab");
|
|
363
|
+
}
|
|
364
|
+
// filter out any nested tabs
|
|
365
|
+
return localTabs;
|
|
366
|
+
}
|
|
367
|
+
getButtonId(index) {
|
|
368
|
+
return `${this.id}-button-${index}`;
|
|
369
|
+
}
|
|
370
|
+
getTabId(index) {
|
|
371
|
+
return `${this.id}-tab-${index}`;
|
|
372
|
+
}
|
|
373
|
+
getAccessibleDescription(index) {
|
|
374
|
+
const description = this.tabs[index].getAttribute("accessible-description") || null;
|
|
375
|
+
return description;
|
|
376
|
+
}
|
|
377
|
+
async updateTabs() {
|
|
378
|
+
this.tabs = this.getTabs();
|
|
379
|
+
this.tabs.forEach((tab, index) => {
|
|
380
|
+
tab.id = this.getTabId(index);
|
|
381
|
+
tab.setAttribute("aria-labelledby", this.getButtonId(index));
|
|
382
|
+
if (tab.selected) {
|
|
383
|
+
this.selected = index;
|
|
384
|
+
}
|
|
385
|
+
});
|
|
386
|
+
return;
|
|
387
|
+
}
|
|
388
|
+
/**
|
|
389
|
+
* render() function
|
|
390
|
+
* Always the last one in the class.
|
|
391
|
+
*/
|
|
392
|
+
render() {
|
|
393
|
+
return (index.h("div", { class: {
|
|
394
|
+
"duet-tab-group": true,
|
|
395
|
+
"duet-theme-turva": this.theme === "turva",
|
|
396
|
+
[`duet-tab-variation-${this.variation}`]: true,
|
|
397
|
+
"duet-tab-group-scrolls": this.scrolls,
|
|
398
|
+
"duet-tab-group-collapses": this.collapses,
|
|
399
|
+
} }, this.tabs.length > 3 && this.collapses && (index.h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
|
|
400
|
+
return { label: tab.label, value: index.toString() };
|
|
401
|
+
}) })), index.h("div", { role: "tablist", class: {
|
|
402
|
+
"duet-m-0": this.margin === "none",
|
|
403
|
+
"duet-tab-group-tabs": true,
|
|
404
|
+
"duet-tab-group-hidden": this.tabs.length > 3,
|
|
405
|
+
"duet-tab-group-collapses": this.collapses,
|
|
406
|
+
} }, this.renderTab()), index.h("div", { class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, index.h("slot", null))));
|
|
407
|
+
}
|
|
408
|
+
get element() { return index.getElement(this); }
|
|
409
|
+
};
|
|
410
|
+
DuetTabGroup.style = duetTabGroupCss;
|
|
411
|
+
|
|
412
|
+
exports.duet_scrollable = DuetScrollable;
|
|
413
|
+
exports.duet_tab = DuetTab;
|
|
414
|
+
exports.duet_tab_group = DuetTabGroup;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
const createId = require('./create-id-c3b984b1.js');
|
|
10
10
|
const stringUtils = require('./string-utils-267e3dbb.js');
|
|
11
11
|
const themeableComponent = require('./themeable-component-0c1be552.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
const createId = require('./create-id-c3b984b1.js');
|
|
10
10
|
const keyboardUtils = require('./keyboard-utils-b4e3d1d3.js');
|
|
11
11
|
const themeableComponent = require('./themeable-component-0c1be552.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
const createId = require('./create-id-c3b984b1.js');
|
|
10
10
|
const inputUtils = require('./input-utils-f3e3854c.js');
|
|
11
11
|
const themeableComponent = require('./themeable-component-0c1be552.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
const createId = require('./create-id-c3b984b1.js');
|
|
10
10
|
const themeableComponent = require('./themeable-component-0c1be552.js');
|
|
11
11
|
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
const createId = require('./create-id-c3b984b1.js');
|
|
10
10
|
const languageUtils = require('./language-utils-aa282901.js');
|
|
11
11
|
const themeableComponent = require('./themeable-component-0c1be552.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
const tokens_module = require('./tokens.module-6b2df1c2.js');
|
|
10
10
|
const createId = require('./create-id-c3b984b1.js');
|
|
11
11
|
const languageUtils = require('./language-utils-aa282901.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const index = require('./index-
|
|
8
|
+
const index = require('./index-6128deac.js');
|
|
9
9
|
|
|
10
10
|
const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}";
|
|
11
11
|
|