@maggioli-design-system/mds-tab 6.8.4 → 6.8.7
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/dist/cjs/mds-tab.cjs.entry.js +1 -1
- package/dist/collection/common/date.js +13 -0
- package/dist/collection/common/locale.js +8 -2
- package/dist/collection/components/mds-tab/mds-tab.css +1 -1
- package/dist/collection/dictionary/button.js +6 -1
- package/dist/collection/dictionary/variant.js +6 -1
- package/dist/collection/type/date.js +1 -0
- package/dist/components/mds-tab.js +1 -1
- package/dist/documentation.json +1 -1
- package/dist/esm/mds-tab.entry.js +1 -1
- package/dist/esm-es5/mds-tab.entry.js +1 -1
- package/dist/mds-tab/mds-tab.esm.js +1 -1
- package/dist/mds-tab/p-0473c0a7.system.js +1 -1
- package/dist/mds-tab/p-2405595d.entry.js +1 -0
- package/dist/mds-tab/p-2aaab613.system.entry.js +1 -0
- package/dist/stats.json +21 -17
- package/dist/types/common/date.d.ts +4 -0
- package/dist/types/common/locale.d.ts +3 -2
- package/dist/types/dictionary/button.d.ts +2 -1
- package/dist/types/dictionary/variant.d.ts +2 -1
- package/dist/types/type/date.d.ts +5 -0
- package/dist/types/type/variant.d.ts +1 -1
- package/documentation.json +18 -8
- package/package.json +2 -2
- package/src/common/date.ts +21 -0
- package/src/common/locale.ts +10 -4
- package/src/components/mds-tab/mds-tab.css +1 -1
- package/src/dictionary/button.ts +7 -0
- package/src/dictionary/variant.ts +7 -0
- package/src/fixtures/icons.json +8 -0
- package/src/fixtures/iconsauce.json +8 -0
- package/src/type/date.ts +10 -0
- package/src/type/variant.ts +1 -1
- package/www/build/mds-tab.esm.js +1 -1
- package/www/build/p-0473c0a7.system.js +1 -1
- package/www/build/p-2405595d.entry.js +1 -0
- package/www/build/p-2aaab613.system.entry.js +1 -0
- package/dist/mds-tab/p-8b73828a.system.entry.js +0 -1
- package/dist/mds-tab/p-fc6f521e.entry.js +0 -1
- package/www/build/p-8b73828a.system.entry.js +0 -1
- package/www/build/p-fc6f521e.entry.js +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-a9a1a9d2.js');
|
|
6
6
|
|
|
7
|
-
const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n";
|
|
7
|
+
const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n";
|
|
8
8
|
const MdsTabStyle0 = mdsTabCss;
|
|
9
9
|
|
|
10
10
|
const MdsTab = class {
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// ISO 8601 date regex allowing optional components (month, day, time)
|
|
2
|
+
const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$';
|
|
3
|
+
const isISO8601Date = (dateString) => {
|
|
4
|
+
const ISO8601Regex = new RegExp(ISO8601RegexString);
|
|
5
|
+
return ISO8601Regex.test(dateString);
|
|
6
|
+
};
|
|
7
|
+
const sanitizeISO8601Date = (dateString) => {
|
|
8
|
+
if (isISO8601Date(dateString)) {
|
|
9
|
+
return dateString;
|
|
10
|
+
}
|
|
11
|
+
return new Date(dateString).toISOString();
|
|
12
|
+
};
|
|
13
|
+
export { sanitizeISO8601Date, isISO8601Date, };
|
|
@@ -2,15 +2,19 @@ import Handlebars from "handlebars";
|
|
|
2
2
|
export class Locale {
|
|
3
3
|
constructor(configData) {
|
|
4
4
|
this.rollbackLanguage = 'en';
|
|
5
|
+
this.set = (configData) => {
|
|
6
|
+
this.config = configData;
|
|
7
|
+
};
|
|
5
8
|
this.lang = (element) => {
|
|
6
9
|
this.closestElement = element.closest('[lang]');
|
|
7
10
|
if (this.closestElement) {
|
|
8
11
|
if (this.closestElement.lang) {
|
|
9
12
|
this.language = this.closestElement.lang;
|
|
10
|
-
return;
|
|
13
|
+
return this.language;
|
|
11
14
|
}
|
|
12
15
|
}
|
|
13
16
|
this.language = this.rollbackLanguage;
|
|
17
|
+
return this.language;
|
|
14
18
|
};
|
|
15
19
|
this.pluralize = (tag, context) => {
|
|
16
20
|
const languagePhrase = this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
|
|
@@ -43,6 +47,8 @@ export class Locale {
|
|
|
43
47
|
}
|
|
44
48
|
return this.config[this.language] ? this.config[this.language][tag] : this.config[this.rollbackLanguage][tag];
|
|
45
49
|
};
|
|
46
|
-
|
|
50
|
+
if (configData) {
|
|
51
|
+
this.set(configData);
|
|
52
|
+
}
|
|
47
53
|
}
|
|
48
54
|
}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
/**
|
|
20
20
|
* @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one
|
|
21
21
|
* @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one
|
|
22
|
-
*/
|
|
22
|
+
*/
|
|
23
23
|
|
|
24
24
|
:host {
|
|
25
25
|
|
|
@@ -27,4 +27,9 @@ const buttonIconPositionDictionary = [
|
|
|
27
27
|
'left',
|
|
28
28
|
'right',
|
|
29
29
|
];
|
|
30
|
-
|
|
30
|
+
const buttonTypeDictionary = [
|
|
31
|
+
'button',
|
|
32
|
+
'submit',
|
|
33
|
+
'reset',
|
|
34
|
+
];
|
|
35
|
+
export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
|
|
@@ -83,8 +83,13 @@ const toneSimpleVariantDictionary = [
|
|
|
83
83
|
'weak',
|
|
84
84
|
'quiet',
|
|
85
85
|
];
|
|
86
|
+
const toneSmartVariantDictionary = [
|
|
87
|
+
'strong',
|
|
88
|
+
'weak',
|
|
89
|
+
'ghost',
|
|
90
|
+
];
|
|
86
91
|
const toneMinimalVariantDictionary = [
|
|
87
92
|
'strong',
|
|
88
93
|
'weak',
|
|
89
94
|
];
|
|
90
|
-
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
|
|
95
|
+
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n";
|
|
3
|
+
const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n";
|
|
4
4
|
const MdsTabStyle0 = mdsTabCss;
|
|
5
5
|
|
|
6
6
|
const MdsTab$1 = /*@__PURE__*/ proxyCustomElement(class MdsTab extends HTMLElement {
|
package/dist/documentation.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-031b9050.js';
|
|
2
2
|
|
|
3
|
-
const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n";
|
|
3
|
+
const mdsTabCss = "@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot=\"content\"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n";
|
|
4
4
|
const MdsTabStyle0 = mdsTabCss;
|
|
5
5
|
|
|
6
6
|
const MdsTab = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-031b9050.js";var mdsTabCss='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';var MdsTabStyle0=mdsTabCss;var MdsTab=function(){function n(n){var t=this;registerInstance(this,n);this.changedEvent=createEvent(this,"mdsTabChange",7);this.currentItem=-1;this.queryContentItems=function(){return t.element.querySelectorAll("[slot=content]")};this.scrollTabs=function(){var n=t.tabItems[t.currentItem];t.tabs.scrollLeft=n.offsetLeft-t.tabs.offsetLeft-t.tabs.offsetWidth/2+n.offsetWidth/2};this.selectTabItem=function(n){t.tabItems.forEach((function(a,o){if(o===n){a.selected=true;t.changedEvent.emit({id:o,value:a.value});t.currentItem=o;t.scrollTabs()}else{a.selected=false}}))};this.selectContentItem=function(){t.contentItems.forEach((function(n,a){n.classList.add("hidden");if(a===t.currentItem){n.classList.remove("hidden")}}))}}n.prototype.componentWillLoad=function(){var n=this;this.tabItems=this.element.querySelectorAll("mds-tab-item");this.tabItems.forEach((function(t,a){if(!t.id){t.id="mds-tab-item-".concat(a)}if(t.selected){n.currentItem=a}}))};n.prototype.componentDidLoad=function(){var n;this.tabs=(n=this.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tabs");this.contentItems=this.queryContentItems();this.selectContentItem()};n.prototype.changeEventHandler=function(n){var t=this;this.tabItems.forEach((function(a,o){if(a.id===n.detail.target.id){t.selectTabItem(o)}else{a.selected=false}}));this.selectContentItem()};n.prototype.render=function(){return h(Host,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},h("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},h("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),h("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},h("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsTab.style=MdsTabStyle0;export{MdsTab as mds_tab};
|
|
1
|
+
import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-031b9050.js";var mdsTabCss='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';var MdsTabStyle0=mdsTabCss;var MdsTab=function(){function n(n){var t=this;registerInstance(this,n);this.changedEvent=createEvent(this,"mdsTabChange",7);this.currentItem=-1;this.queryContentItems=function(){return t.element.querySelectorAll("[slot=content]")};this.scrollTabs=function(){var n=t.tabItems[t.currentItem];t.tabs.scrollLeft=n.offsetLeft-t.tabs.offsetLeft-t.tabs.offsetWidth/2+n.offsetWidth/2};this.selectTabItem=function(n){t.tabItems.forEach((function(a,o){if(o===n){a.selected=true;t.changedEvent.emit({id:o,value:a.value});t.currentItem=o;t.scrollTabs()}else{a.selected=false}}))};this.selectContentItem=function(){t.contentItems.forEach((function(n,a){n.classList.add("hidden");if(a===t.currentItem){n.classList.remove("hidden")}}))}}n.prototype.componentWillLoad=function(){var n=this;this.tabItems=this.element.querySelectorAll("mds-tab-item");this.tabItems.forEach((function(t,a){if(!t.id){t.id="mds-tab-item-".concat(a)}if(t.selected){n.currentItem=a}}))};n.prototype.componentDidLoad=function(){var n;this.tabs=(n=this.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tabs");this.contentItems=this.queryContentItems();this.selectContentItem()};n.prototype.changeEventHandler=function(n){var t=this;this.tabItems.forEach((function(a,o){if(a.id===n.detail.target.id){t.selectTabItem(o)}else{a.selected=false}}));this.selectContentItem()};n.prototype.render=function(){return h(Host,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},h("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},h("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),h("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},h("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsTab.style=MdsTabStyle0;export{MdsTab as mds_tab};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-699c0b98.js";export{s as setNonce}from"./p-699c0b98.js";import{g as a}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await a(),t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-699c0b98.js";export{s as setNonce}from"./p-699c0b98.js";import{g as a}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await a(),t([["p-2405595d",[[1,"mds-tab",null,[[0,"mdsTabItemSelect","changeEventHandler"]]]]]],e))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,u){function c(n){try{
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,u){function c(n){try{o(r.next(n))}catch(n){u(n)}}function a(n){try{o(r["throw"](n))}catch(n){u(n)}}function o(n){n.done?e(n.value):i(n.value).then(c,a)}o((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function a(n){return function(t){return o([n,t])}}function o(a){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,a[0]&&(e=0)),e)try{if(r=1,i&&(u=a[0]&2?i["return"]:a[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,a[1])).done)return u;if(i=0,u)a=[a[0]&2,u.value];switch(a[0]){case 0:case 1:u=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;i=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!u||a[1]>u[0]&&a[1]<u[3])){e.label=a[1];break}if(a[0]===6&&e.label<u[1]){e.label=u[1];u=a;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(a);break}if(u[2])e.ops.pop();e.trys.pop();continue}a=t.call(n,e)}catch(n){a=[6,n];i=0}finally{r=u=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-ddd0b40f.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var u=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};u().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-2aaab613.system",[[1,"mds-tab",null,[[0,"mdsTabItemSelect","changeEventHandler"]]]]]],t)]}}))}))}))}}}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as n,c as t,h as a,H as o,g as r}from"./p-699c0b98.js";const e=class{constructor(a){n(this,a),this.changedEvent=t(this,"mdsTabChange",7),this.currentItem=-1,this.queryContentItems=()=>this.element.querySelectorAll("[slot=content]"),this.scrollTabs=()=>{const n=this.tabItems[this.currentItem];this.tabs.scrollLeft=n.offsetLeft-this.tabs.offsetLeft-this.tabs.offsetWidth/2+n.offsetWidth/2},this.selectTabItem=n=>{this.tabItems.forEach(((t,a)=>{a===n?(t.selected=!0,this.changedEvent.emit({id:a,value:t.value}),this.currentItem=a,this.scrollTabs()):t.selected=!1}))},this.selectContentItem=()=>{this.contentItems.forEach(((n,t)=>{n.classList.add("hidden"),t===this.currentItem&&n.classList.remove("hidden")}))}}componentWillLoad(){this.tabItems=this.element.querySelectorAll("mds-tab-item"),this.tabItems.forEach(((n,t)=>{n.id||(n.id=`mds-tab-item-${t}`),n.selected&&(this.currentItem=t)}))}componentDidLoad(){var n;this.tabs=null===(n=this.element.shadowRoot)||void 0===n?void 0:n.querySelector(".tabs"),this.contentItems=this.queryContentItems(),this.selectContentItem()}changeEventHandler(n){this.tabItems.forEach(((t,a)=>{t.id===n.detail.target.id?this.selectTabItem(a):t.selected=!1})),this.selectContentItem()}render(){return a(o,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},a("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},a("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),a("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},a("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))}get element(){return r(this)}};e.style='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';export{e as mds_tab}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
System.register(["./p-ddd0b40f.system.js"],(function(n){"use strict";var t,a,o,r,e;return{setters:[function(n){t=n.r;a=n.c;o=n.h;r=n.H;e=n.g}],execute:function(){var i='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';var l=i;var b=n("mds_tab",function(){function n(n){var o=this;t(this,n);this.changedEvent=a(this,"mdsTabChange",7);this.currentItem=-1;this.queryContentItems=function(){return o.element.querySelectorAll("[slot=content]")};this.scrollTabs=function(){var n=o.tabItems[o.currentItem];o.tabs.scrollLeft=n.offsetLeft-o.tabs.offsetLeft-o.tabs.offsetWidth/2+n.offsetWidth/2};this.selectTabItem=function(n){o.tabItems.forEach((function(t,a){if(a===n){t.selected=true;o.changedEvent.emit({id:a,value:t.value});o.currentItem=a;o.scrollTabs()}else{t.selected=false}}))};this.selectContentItem=function(){o.contentItems.forEach((function(n,t){n.classList.add("hidden");if(t===o.currentItem){n.classList.remove("hidden")}}))}}n.prototype.componentWillLoad=function(){var n=this;this.tabItems=this.element.querySelectorAll("mds-tab-item");this.tabItems.forEach((function(t,a){if(!t.id){t.id="mds-tab-item-".concat(a)}if(t.selected){n.currentItem=a}}))};n.prototype.componentDidLoad=function(){var n;this.tabs=(n=this.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tabs");this.contentItems=this.queryContentItems();this.selectContentItem()};n.prototype.changeEventHandler=function(n){var t=this;this.tabItems.forEach((function(a,o){if(a.id===n.detail.target.id){t.selectTabItem(o)}else{a.selected=false}}));this.selectContentItem()};n.prototype.render=function(){return o(r,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},o("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},o("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),o("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},o("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))};Object.defineProperty(n.prototype,"element",{get:function(){return e(this)},enumerable:false,configurable:true});return n}());b.style=l}}}));
|
package/dist/stats.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-09-
|
|
2
|
+
"timestamp": "2024-09-26T11:03:59",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "node",
|
|
5
5
|
"version": "20.10.0"
|
|
@@ -9,13 +9,14 @@
|
|
|
9
9
|
"fsNamespace": "mds-tab",
|
|
10
10
|
"components": 1,
|
|
11
11
|
"entries": 1,
|
|
12
|
-
"bundles":
|
|
12
|
+
"bundles": 95,
|
|
13
13
|
"outputs": [
|
|
14
14
|
{
|
|
15
15
|
"name": "dist-collection",
|
|
16
|
-
"files":
|
|
16
|
+
"files": 47,
|
|
17
17
|
"generatedFiles": [
|
|
18
18
|
"./dist/collection/common/aria.js",
|
|
19
|
+
"./dist/collection/common/date.js",
|
|
19
20
|
"./dist/collection/common/file.js",
|
|
20
21
|
"./dist/collection/common/icon.js",
|
|
21
22
|
"./dist/collection/common/keyboard-manager.js",
|
|
@@ -49,6 +50,7 @@
|
|
|
49
50
|
"./dist/collection/interface/input-value.js",
|
|
50
51
|
"./dist/collection/type/autocomplete.js",
|
|
51
52
|
"./dist/collection/type/button.js",
|
|
53
|
+
"./dist/collection/type/date.js",
|
|
52
54
|
"./dist/collection/type/file-types.js",
|
|
53
55
|
"./dist/collection/type/floating-ui.js",
|
|
54
56
|
"./dist/collection/type/form-rel.js",
|
|
@@ -100,24 +102,24 @@
|
|
|
100
102
|
"./dist/mds-tab/mds-tab.esm.js",
|
|
101
103
|
"./dist/mds-tab/mds-tab.js",
|
|
102
104
|
"./dist/mds-tab/p-0473c0a7.system.js",
|
|
105
|
+
"./dist/mds-tab/p-2405595d.entry.js",
|
|
106
|
+
"./dist/mds-tab/p-2aaab613.system.entry.js",
|
|
103
107
|
"./dist/mds-tab/p-50ea2036.system.js",
|
|
104
108
|
"./dist/mds-tab/p-56ba5cbf.system.js",
|
|
105
109
|
"./dist/mds-tab/p-699c0b98.js",
|
|
106
|
-
"./dist/mds-tab/p-8b73828a.system.entry.js",
|
|
107
110
|
"./dist/mds-tab/p-ddd0b40f.system.js",
|
|
108
111
|
"./dist/mds-tab/p-e1255160.js",
|
|
109
|
-
"./dist/mds-tab/p-fc6f521e.entry.js",
|
|
110
112
|
"./www/build/index.esm.js",
|
|
111
113
|
"./www/build/mds-tab.esm.js",
|
|
112
114
|
"./www/build/mds-tab.js",
|
|
113
115
|
"./www/build/p-0473c0a7.system.js",
|
|
116
|
+
"./www/build/p-2405595d.entry.js",
|
|
117
|
+
"./www/build/p-2aaab613.system.entry.js",
|
|
114
118
|
"./www/build/p-50ea2036.system.js",
|
|
115
119
|
"./www/build/p-56ba5cbf.system.js",
|
|
116
120
|
"./www/build/p-699c0b98.js",
|
|
117
|
-
"./www/build/p-8b73828a.system.entry.js",
|
|
118
121
|
"./www/build/p-ddd0b40f.system.js",
|
|
119
|
-
"./www/build/p-e1255160.js"
|
|
120
|
-
"./www/build/p-fc6f521e.entry.js"
|
|
122
|
+
"./www/build/p-e1255160.js"
|
|
121
123
|
]
|
|
122
124
|
},
|
|
123
125
|
{
|
|
@@ -150,12 +152,12 @@
|
|
|
150
152
|
"components": [
|
|
151
153
|
"mds-tab"
|
|
152
154
|
],
|
|
153
|
-
"bundleId": "p-
|
|
154
|
-
"fileName": "p-
|
|
155
|
+
"bundleId": "p-2405595d",
|
|
156
|
+
"fileName": "p-2405595d.entry.js",
|
|
155
157
|
"imports": [
|
|
156
158
|
"p-699c0b98.js"
|
|
157
159
|
],
|
|
158
|
-
"originalByteSize":
|
|
160
|
+
"originalByteSize": 11850
|
|
159
161
|
}
|
|
160
162
|
],
|
|
161
163
|
"esm": [
|
|
@@ -169,7 +171,7 @@
|
|
|
169
171
|
"imports": [
|
|
170
172
|
"index-031b9050.js"
|
|
171
173
|
],
|
|
172
|
-
"originalByteSize":
|
|
174
|
+
"originalByteSize": 11854
|
|
173
175
|
}
|
|
174
176
|
],
|
|
175
177
|
"es5": [
|
|
@@ -183,7 +185,7 @@
|
|
|
183
185
|
"imports": [
|
|
184
186
|
"index-031b9050.js"
|
|
185
187
|
],
|
|
186
|
-
"originalByteSize":
|
|
188
|
+
"originalByteSize": 11854
|
|
187
189
|
}
|
|
188
190
|
],
|
|
189
191
|
"system": [
|
|
@@ -192,12 +194,12 @@
|
|
|
192
194
|
"components": [
|
|
193
195
|
"mds-tab"
|
|
194
196
|
],
|
|
195
|
-
"bundleId": "p-
|
|
196
|
-
"fileName": "p-
|
|
197
|
+
"bundleId": "p-2aaab613.system",
|
|
198
|
+
"fileName": "p-2aaab613.system.entry.js",
|
|
197
199
|
"imports": [
|
|
198
200
|
"p-ddd0b40f.system.js"
|
|
199
201
|
],
|
|
200
|
-
"originalByteSize":
|
|
202
|
+
"originalByteSize": 12525
|
|
201
203
|
}
|
|
202
204
|
],
|
|
203
205
|
"commonjs": [
|
|
@@ -211,7 +213,7 @@
|
|
|
211
213
|
"imports": [
|
|
212
214
|
"index-a9a1a9d2.js"
|
|
213
215
|
],
|
|
214
|
-
"originalByteSize":
|
|
216
|
+
"originalByteSize": 11919
|
|
215
217
|
}
|
|
216
218
|
]
|
|
217
219
|
},
|
|
@@ -459,6 +461,7 @@
|
|
|
459
461
|
},
|
|
460
462
|
"sourceGraph": {
|
|
461
463
|
"./src/common/aria.ts": [],
|
|
464
|
+
"./src/common/date.ts": [],
|
|
462
465
|
"./src/common/file.ts": [],
|
|
463
466
|
"./src/common/icon.ts": [],
|
|
464
467
|
"./src/common/keyboard-manager.ts": [],
|
|
@@ -504,6 +507,7 @@
|
|
|
504
507
|
"./src/interface/input-value.ts": [],
|
|
505
508
|
"./src/type/autocomplete.ts": [],
|
|
506
509
|
"./src/type/button.ts": [],
|
|
510
|
+
"./src/type/date.ts": [],
|
|
507
511
|
"./src/type/file-types.ts": [],
|
|
508
512
|
"./src/type/floating-ui.ts": [],
|
|
509
513
|
"./src/type/form-rel.ts": [],
|
|
@@ -9,8 +9,9 @@ export declare class Locale {
|
|
|
9
9
|
language: string;
|
|
10
10
|
config: LocaleConfig;
|
|
11
11
|
closestElement: HTMLElement;
|
|
12
|
-
constructor(configData
|
|
13
|
-
|
|
12
|
+
constructor(configData?: LocaleConfig);
|
|
13
|
+
set: (configData: LocaleConfig) => void;
|
|
14
|
+
lang: (element: HTMLElement) => string;
|
|
14
15
|
private pluralize;
|
|
15
16
|
get: (tag: string | string[], context?: Record<string, string | number>) => string;
|
|
16
17
|
}
|
|
@@ -3,4 +3,5 @@ declare const buttonToneVariantDictionary: string[];
|
|
|
3
3
|
declare const buttonTargetDictionary: string[];
|
|
4
4
|
declare const buttonSizeDictionary: string[];
|
|
5
5
|
declare const buttonIconPositionDictionary: string[];
|
|
6
|
-
|
|
6
|
+
declare const buttonTypeDictionary: string[];
|
|
7
|
+
export { buttonIconPositionDictionary, buttonSizeDictionary, buttonTargetDictionary, buttonToneVariantDictionary, buttonTypeDictionary, buttonVariantDictionary, };
|
|
@@ -7,5 +7,6 @@ declare const themeLabelVariantDictionary: string[];
|
|
|
7
7
|
declare const toneVariantDictionary: string[];
|
|
8
8
|
declare const toneActionVariantDictionary: string[];
|
|
9
9
|
declare const toneSimpleVariantDictionary: string[];
|
|
10
|
+
declare const toneSmartVariantDictionary: string[];
|
|
10
11
|
declare const toneMinimalVariantDictionary: string[];
|
|
11
|
-
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };
|
|
12
|
+
export { themeFullVariantAvatarDictionary, themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneActionVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneSmartVariantDictionary, toneVariantDictionary, };
|
|
@@ -8,5 +8,5 @@ export type ActionVariantType = 'primary' | 'dark' | 'light';
|
|
|
8
8
|
export type StateVariantType = 'disabled' | 'focused' | 'readonly';
|
|
9
9
|
export type ToneActionVariantType = 'primary' | 'secondary' | 'tertiary' | 'strong' | 'weak' | 'ghost' | 'quiet';
|
|
10
10
|
export type ToneVariantType = 'strong' | 'weak' | 'ghost' | 'quiet';
|
|
11
|
-
export type ToneSimpleVariantType = '
|
|
11
|
+
export type ToneSimpleVariantType = 'quiet' | 'strong' | 'weak';
|
|
12
12
|
export type ToneMinimalVariantType = 'strong' | 'weak';
|
package/documentation.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2024-09-
|
|
2
|
+
"timestamp": "2024-09-26T07:00:37",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.21.0",
|
|
@@ -153,8 +153,8 @@
|
|
|
153
153
|
"docstring": "",
|
|
154
154
|
"path": "src/type/variant.ts"
|
|
155
155
|
},
|
|
156
|
-
"src/type/variant.ts::
|
|
157
|
-
"declaration": "export type
|
|
156
|
+
"src/type/variant.ts::ToneVariantType": {
|
|
157
|
+
"declaration": "export type ToneVariantType =\n | 'strong' // background strong\n | 'weak' // background weak\n | 'ghost' // bordered\n | 'quiet'",
|
|
158
158
|
"docstring": "",
|
|
159
159
|
"path": "src/type/variant.ts"
|
|
160
160
|
},
|
|
@@ -178,6 +178,11 @@
|
|
|
178
178
|
"docstring": "",
|
|
179
179
|
"path": "src/type/variant.ts"
|
|
180
180
|
},
|
|
181
|
+
"src/type/variant.ts::ToneSimpleVariantType": {
|
|
182
|
+
"declaration": "export type ToneSimpleVariantType =\n | 'quiet'\n | 'strong'\n | 'weak'",
|
|
183
|
+
"docstring": "",
|
|
184
|
+
"path": "src/type/variant.ts"
|
|
185
|
+
},
|
|
181
186
|
"src/components/mds-benchmark-bar/meta/types.ts::BenchmarkBarTypographyType": {
|
|
182
187
|
"declaration": "export type BenchmarkBarTypographyType =\n | 'option'\n | 'label'",
|
|
183
188
|
"docstring": "",
|
|
@@ -218,11 +223,6 @@
|
|
|
218
223
|
"docstring": "",
|
|
219
224
|
"path": "src/type/button.ts"
|
|
220
225
|
},
|
|
221
|
-
"src/type/variant.ts::ToneVariantType": {
|
|
222
|
-
"declaration": "export type ToneVariantType =\n | 'strong' // background strong\n | 'weak' // background weak\n | 'ghost' // bordered\n | 'quiet'",
|
|
223
|
-
"docstring": "",
|
|
224
|
-
"path": "src/type/variant.ts"
|
|
225
|
-
},
|
|
226
226
|
"src/type/button.ts::ButtonSizeType": {
|
|
227
227
|
"declaration": "export type ButtonSizeType =\n | 'sm'\n | 'md'\n | 'lg'\n | 'xl'",
|
|
228
228
|
"docstring": "",
|
|
@@ -498,6 +498,16 @@
|
|
|
498
498
|
"docstring": "",
|
|
499
499
|
"path": "src/components/mds-progress/meta/types.ts"
|
|
500
500
|
},
|
|
501
|
+
"src/type/date.ts::ISO8601Date": {
|
|
502
|
+
"declaration": "type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>",
|
|
503
|
+
"docstring": "",
|
|
504
|
+
"path": "src/type/date.ts"
|
|
505
|
+
},
|
|
506
|
+
"src/components/mds-push-notification/meta/types.ts::NotificationDateFormatType": {
|
|
507
|
+
"declaration": "string",
|
|
508
|
+
"docstring": "",
|
|
509
|
+
"path": "src/components/mds-push-notification/meta/types.ts"
|
|
510
|
+
},
|
|
501
511
|
"src/components/mds-push-notification/meta/types.ts::NotificationPreviewType": {
|
|
502
512
|
"declaration": "export type NotificationPreviewType =\n | 'avatar'\n | 'image'",
|
|
503
513
|
"docstring": "",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maggioli-design-system/mds-tab",
|
|
3
|
-
"version": "6.8.
|
|
3
|
+
"version": "6.8.7",
|
|
4
4
|
"description": "mds-tab is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"test": "stencil test --spec --e2e"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@maggioli-design-system/mds-tab-item": "6.9.
|
|
27
|
+
"@maggioli-design-system/mds-tab-item": "6.9.7",
|
|
28
28
|
"@maggioli-design-system/styles": "15.3.2",
|
|
29
29
|
"@stencil/core": "4.21.0"
|
|
30
30
|
},
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { ISO8601Date } from '@type/date'
|
|
2
|
+
|
|
3
|
+
// ISO 8601 date regex allowing optional components (month, day, time)
|
|
4
|
+
const ISO8601RegexString = '^\\d{4}(-\\d{2})?(-\\d{2})?(T\\d{2}(:\\d{2})?(:\\d{2})?(\\.\\d{3})?)?([+-]\\d{2}:\\d{2}|Z)?$'
|
|
5
|
+
|
|
6
|
+
const isISO8601Date = (dateString: string): boolean => {
|
|
7
|
+
const ISO8601Regex = new RegExp(ISO8601RegexString)
|
|
8
|
+
return ISO8601Regex.test(dateString)
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const sanitizeISO8601Date = (dateString: string): ISO8601Date => {
|
|
12
|
+
if (isISO8601Date(dateString)) {
|
|
13
|
+
return dateString as ISO8601Date
|
|
14
|
+
}
|
|
15
|
+
return new Date(dateString).toISOString() as ISO8601Date
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
sanitizeISO8601Date,
|
|
20
|
+
isISO8601Date,
|
|
21
|
+
}
|
package/src/common/locale.ts
CHANGED
|
@@ -13,22 +13,28 @@ export class Locale {
|
|
|
13
13
|
config: LocaleConfig
|
|
14
14
|
closestElement:HTMLElement
|
|
15
15
|
|
|
16
|
-
constructor (configData
|
|
16
|
+
constructor (configData?: LocaleConfig) {
|
|
17
|
+
if (configData) {
|
|
18
|
+
this.set(configData)
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
set = (configData: LocaleConfig): void => {
|
|
17
23
|
this.config = configData
|
|
18
24
|
}
|
|
19
25
|
|
|
20
|
-
lang = (element: HTMLElement):
|
|
26
|
+
lang = (element: HTMLElement): string => {
|
|
21
27
|
this.closestElement = element.closest('[lang]') as HTMLElement
|
|
22
28
|
|
|
23
|
-
|
|
24
29
|
if (this.closestElement) {
|
|
25
30
|
if (this.closestElement.lang) {
|
|
26
31
|
this.language = this.closestElement.lang
|
|
27
|
-
return
|
|
32
|
+
return this.language
|
|
28
33
|
}
|
|
29
34
|
}
|
|
30
35
|
|
|
31
36
|
this.language = this.rollbackLanguage
|
|
37
|
+
return this.language
|
|
32
38
|
}
|
|
33
39
|
|
|
34
40
|
private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
/**
|
|
6
6
|
* @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one
|
|
7
7
|
* @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one
|
|
8
|
-
*/
|
|
8
|
+
*/
|
|
9
9
|
|
|
10
10
|
:host {
|
|
11
11
|
|
package/src/dictionary/button.ts
CHANGED
|
@@ -32,10 +32,17 @@ const buttonIconPositionDictionary = [
|
|
|
32
32
|
'right',
|
|
33
33
|
]
|
|
34
34
|
|
|
35
|
+
const buttonTypeDictionary = [
|
|
36
|
+
'button',
|
|
37
|
+
'submit',
|
|
38
|
+
'reset',
|
|
39
|
+
]
|
|
40
|
+
|
|
35
41
|
export {
|
|
36
42
|
buttonIconPositionDictionary,
|
|
37
43
|
buttonSizeDictionary,
|
|
38
44
|
buttonTargetDictionary,
|
|
39
45
|
buttonToneVariantDictionary,
|
|
46
|
+
buttonTypeDictionary,
|
|
40
47
|
buttonVariantDictionary,
|
|
41
48
|
}
|
|
@@ -92,6 +92,12 @@ const toneSimpleVariantDictionary = [
|
|
|
92
92
|
'quiet',
|
|
93
93
|
]
|
|
94
94
|
|
|
95
|
+
const toneSmartVariantDictionary = [
|
|
96
|
+
'strong',
|
|
97
|
+
'weak',
|
|
98
|
+
'ghost',
|
|
99
|
+
]
|
|
100
|
+
|
|
95
101
|
const toneMinimalVariantDictionary = [
|
|
96
102
|
'strong',
|
|
97
103
|
'weak',
|
|
@@ -107,5 +113,6 @@ export {
|
|
|
107
113
|
toneActionVariantDictionary,
|
|
108
114
|
toneMinimalVariantDictionary,
|
|
109
115
|
toneSimpleVariantDictionary,
|
|
116
|
+
toneSmartVariantDictionary,
|
|
110
117
|
toneVariantDictionary,
|
|
111
118
|
}
|
package/src/fixtures/icons.json
CHANGED
|
@@ -33,6 +33,7 @@
|
|
|
33
33
|
"mgg/address-book-off",
|
|
34
34
|
"mgg/address-book-on",
|
|
35
35
|
"mgg/adv-denied",
|
|
36
|
+
"mgg/ai",
|
|
36
37
|
"mgg/alerts-pagopa",
|
|
37
38
|
"mgg/ansc",
|
|
38
39
|
"mgg/area-edificabile",
|
|
@@ -123,12 +124,19 @@
|
|
|
123
124
|
"mgg/fit-vertical",
|
|
124
125
|
"mgg/forwarded-with-a-single-sending",
|
|
125
126
|
"mgg/fullscreen-on-alt",
|
|
127
|
+
"mgg/google-book-closed",
|
|
128
|
+
"mgg/google-book-closed-outline",
|
|
129
|
+
"mgg/google-book-large",
|
|
130
|
+
"mgg/google-book-large-outline",
|
|
131
|
+
"mgg/google-book-opening",
|
|
132
|
+
"mgg/google-book-opening-outline",
|
|
126
133
|
"mgg/google-check-small",
|
|
127
134
|
"mgg/google-experiment",
|
|
128
135
|
"mgg/google-face-retouching-off",
|
|
129
136
|
"mgg/google-hub",
|
|
130
137
|
"mgg/google-keyboard-double-arrow-down",
|
|
131
138
|
"mgg/google-keyboard-double-arrow-up",
|
|
139
|
+
"mgg/google-newsstand",
|
|
132
140
|
"mgg/google-place-item",
|
|
133
141
|
"mgg/group-assigned-automatically-system",
|
|
134
142
|
"mgg/group-ceased",
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"mgg/address-book-off",
|
|
22
22
|
"mgg/address-book-on",
|
|
23
23
|
"mgg/adv-denied",
|
|
24
|
+
"mgg/ai",
|
|
24
25
|
"mgg/alerts-pagopa",
|
|
25
26
|
"mgg/ansc",
|
|
26
27
|
"mgg/area-edificabile",
|
|
@@ -111,12 +112,19 @@
|
|
|
111
112
|
"mgg/fit-vertical",
|
|
112
113
|
"mgg/forwarded-with-a-single-sending",
|
|
113
114
|
"mgg/fullscreen-on-alt",
|
|
115
|
+
"mgg/google-book-closed-outline",
|
|
116
|
+
"mgg/google-book-closed",
|
|
117
|
+
"mgg/google-book-large-outline",
|
|
118
|
+
"mgg/google-book-large",
|
|
119
|
+
"mgg/google-book-opening-outline",
|
|
120
|
+
"mgg/google-book-opening",
|
|
114
121
|
"mgg/google-check-small",
|
|
115
122
|
"mgg/google-experiment",
|
|
116
123
|
"mgg/google-face-retouching-off",
|
|
117
124
|
"mgg/google-hub",
|
|
118
125
|
"mgg/google-keyboard-double-arrow-down",
|
|
119
126
|
"mgg/google-keyboard-double-arrow-up",
|
|
127
|
+
"mgg/google-newsstand",
|
|
120
128
|
"mgg/google-place-item",
|
|
121
129
|
"mgg/group-assigned-automatically-system",
|
|
122
130
|
"mgg/group-ceased",
|
package/src/type/date.ts
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type ISO8601DateFormat<K, T> = K & { __isISO8601DateFormat: T };
|
|
2
|
+
|
|
3
|
+
// Defines a branded type for the date ISO 8601 string
|
|
4
|
+
type ISO8601Date = ISO8601DateFormat<string, 'ISO8601Date'>
|
|
5
|
+
|
|
6
|
+
// const validDate: ISO8601Date = sanitizeISO8601Date('2024-09-24T15:30:00Z')
|
|
7
|
+
|
|
8
|
+
export {
|
|
9
|
+
ISO8601Date,
|
|
10
|
+
}
|
package/src/type/variant.ts
CHANGED
package/www/build/mds-tab.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-699c0b98.js";export{s as setNonce}from"./p-699c0b98.js";import{g as a}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await a(),t([["p-
|
|
1
|
+
import{p as e,b as t}from"./p-699c0b98.js";export{s as setNonce}from"./p-699c0b98.js";import{g as a}from"./p-e1255160.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),e(t)})().then((async e=>(await a(),t([["p-2405595d",[[1,"mds-tab",null,[[0,"mdsTabItemSelect","changeEventHandler"]]]]]],e))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,u){function c(n){try{
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,u){function c(n){try{o(r.next(n))}catch(n){u(n)}}function a(n){try{o(r["throw"](n))}catch(n){u(n)}}function o(n){n.done?e(n.value):i(n.value).then(c,a)}o((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function a(n){return function(t){return o([n,t])}}function o(a){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,a[0]&&(e=0)),e)try{if(r=1,i&&(u=a[0]&2?i["return"]:a[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,a[1])).done)return u;if(i=0,u)a=[a[0]&2,u.value];switch(a[0]){case 0:case 1:u=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;i=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!u||a[1]>u[0]&&a[1]<u[3])){e.label=a[1];break}if(a[0]===6&&e.label<u[1]){e.label=u[1];u=a;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(a);break}if(u[2])e.ops.pop();e.trys.pop();continue}a=t.call(n,e)}catch(n){a=[6,n];i=0}finally{r=u=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-ddd0b40f.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var u=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};u().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-2aaab613.system",[[1,"mds-tab",null,[[0,"mdsTabItemSelect","changeEventHandler"]]]]]],t)]}}))}))}))}}}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as n,c as t,h as a,H as o,g as r}from"./p-699c0b98.js";const e=class{constructor(a){n(this,a),this.changedEvent=t(this,"mdsTabChange",7),this.currentItem=-1,this.queryContentItems=()=>this.element.querySelectorAll("[slot=content]"),this.scrollTabs=()=>{const n=this.tabItems[this.currentItem];this.tabs.scrollLeft=n.offsetLeft-this.tabs.offsetLeft-this.tabs.offsetWidth/2+n.offsetWidth/2},this.selectTabItem=n=>{this.tabItems.forEach(((t,a)=>{a===n?(t.selected=!0,this.changedEvent.emit({id:a,value:t.value}),this.currentItem=a,this.scrollTabs()):t.selected=!1}))},this.selectContentItem=()=>{this.contentItems.forEach(((n,t)=>{n.classList.add("hidden"),t===this.currentItem&&n.classList.remove("hidden")}))}}componentWillLoad(){this.tabItems=this.element.querySelectorAll("mds-tab-item"),this.tabItems.forEach(((n,t)=>{n.id||(n.id=`mds-tab-item-${t}`),n.selected&&(this.currentItem=t)}))}componentDidLoad(){var n;this.tabs=null===(n=this.element.shadowRoot)||void 0===n?void 0:n.querySelector(".tabs"),this.contentItems=this.queryContentItems(),this.selectContentItem()}changeEventHandler(n){this.tabItems.forEach(((t,a)=>{t.id===n.detail.target.id?this.selectTabItem(a):t.selected=!1})),this.selectContentItem()}render(){return a(o,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},a("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},a("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),a("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},a("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))}get element(){return r(this)}};e.style='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';export{e as mds_tab}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
System.register(["./p-ddd0b40f.system.js"],(function(n){"use strict";var t,a,o,r,e;return{setters:[function(n){t=n.r;a=n.c;o=n.h;r=n.H;e=n.g}],execute:function(){var i='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n */\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';var l=i;var b=n("mds_tab",function(){function n(n){var o=this;t(this,n);this.changedEvent=a(this,"mdsTabChange",7);this.currentItem=-1;this.queryContentItems=function(){return o.element.querySelectorAll("[slot=content]")};this.scrollTabs=function(){var n=o.tabItems[o.currentItem];o.tabs.scrollLeft=n.offsetLeft-o.tabs.offsetLeft-o.tabs.offsetWidth/2+n.offsetWidth/2};this.selectTabItem=function(n){o.tabItems.forEach((function(t,a){if(a===n){t.selected=true;o.changedEvent.emit({id:a,value:t.value});o.currentItem=a;o.scrollTabs()}else{t.selected=false}}))};this.selectContentItem=function(){o.contentItems.forEach((function(n,t){n.classList.add("hidden");if(t===o.currentItem){n.classList.remove("hidden")}}))}}n.prototype.componentWillLoad=function(){var n=this;this.tabItems=this.element.querySelectorAll("mds-tab-item");this.tabItems.forEach((function(t,a){if(!t.id){t.id="mds-tab-item-".concat(a)}if(t.selected){n.currentItem=a}}))};n.prototype.componentDidLoad=function(){var n;this.tabs=(n=this.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tabs");this.contentItems=this.queryContentItems();this.selectContentItem()};n.prototype.changeEventHandler=function(n){var t=this;this.tabItems.forEach((function(a,o){if(a.id===n.detail.target.id){t.selectTabItem(o)}else{a.selected=false}}));this.selectContentItem()};n.prototype.render=function(){return o(r,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},o("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},o("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),o("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},o("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))};Object.defineProperty(n.prototype,"element",{get:function(){return e(this)},enumerable:false,configurable:true});return n}());b.style=l}}}));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
System.register(["./p-ddd0b40f.system.js"],(function(n){"use strict";var t,a,o,r,e;return{setters:[function(n){t=n.r;a=n.c;o=n.h;r=n.H;e=n.g}],execute:function(){var i='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';var l=i;var b=n("mds_tab",function(){function n(n){var o=this;t(this,n);this.changedEvent=a(this,"mdsTabChange",7);this.currentItem=-1;this.queryContentItems=function(){return o.element.querySelectorAll("[slot=content]")};this.scrollTabs=function(){var n=o.tabItems[o.currentItem];o.tabs.scrollLeft=n.offsetLeft-o.tabs.offsetLeft-o.tabs.offsetWidth/2+n.offsetWidth/2};this.selectTabItem=function(n){o.tabItems.forEach((function(t,a){if(a===n){t.selected=true;o.changedEvent.emit({id:a,value:t.value});o.currentItem=a;o.scrollTabs()}else{t.selected=false}}))};this.selectContentItem=function(){o.contentItems.forEach((function(n,t){n.classList.add("hidden");if(t===o.currentItem){n.classList.remove("hidden")}}))}}n.prototype.componentWillLoad=function(){var n=this;this.tabItems=this.element.querySelectorAll("mds-tab-item");this.tabItems.forEach((function(t,a){if(!t.id){t.id="mds-tab-item-".concat(a)}if(t.selected){n.currentItem=a}}))};n.prototype.componentDidLoad=function(){var n;this.tabs=(n=this.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tabs");this.contentItems=this.queryContentItems();this.selectContentItem()};n.prototype.changeEventHandler=function(n){var t=this;this.tabItems.forEach((function(a,o){if(a.id===n.detail.target.id){t.selectTabItem(o)}else{a.selected=false}}));this.selectContentItem()};n.prototype.render=function(){return o(r,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},o("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},o("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),o("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},o("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))};Object.defineProperty(n.prototype,"element",{get:function(){return e(this)},enumerable:false,configurable:true});return n}());b.style=l}}}));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as n,c as t,h as a,H as o,g as r}from"./p-699c0b98.js";const e=class{constructor(a){n(this,a),this.changedEvent=t(this,"mdsTabChange",7),this.currentItem=-1,this.queryContentItems=()=>this.element.querySelectorAll("[slot=content]"),this.scrollTabs=()=>{const n=this.tabItems[this.currentItem];this.tabs.scrollLeft=n.offsetLeft-this.tabs.offsetLeft-this.tabs.offsetWidth/2+n.offsetWidth/2},this.selectTabItem=n=>{this.tabItems.forEach(((t,a)=>{a===n?(t.selected=!0,this.changedEvent.emit({id:a,value:t.value}),this.currentItem=a,this.scrollTabs()):t.selected=!1}))},this.selectContentItem=()=>{this.contentItems.forEach(((n,t)=>{n.classList.add("hidden"),t===this.currentItem&&n.classList.remove("hidden")}))}}componentWillLoad(){this.tabItems=this.element.querySelectorAll("mds-tab-item"),this.tabItems.forEach(((n,t)=>{n.id||(n.id=`mds-tab-item-${t}`),n.selected&&(this.currentItem=t)}))}componentDidLoad(){var n;this.tabs=null===(n=this.element.shadowRoot)||void 0===n?void 0:n.querySelector(".tabs"),this.contentItems=this.queryContentItems(),this.selectContentItem()}changeEventHandler(n){this.tabItems.forEach(((t,a)=>{t.id===n.detail.target.id?this.selectTabItem(a):t.selected=!1})),this.selectContentItem()}render(){return a(o,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},a("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},a("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),a("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},a("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))}get element(){return r(this)}};e.style='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';export{e as mds_tab}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
System.register(["./p-ddd0b40f.system.js"],(function(n){"use strict";var t,a,o,r,e;return{setters:[function(n){t=n.r;a=n.c;o=n.h;r=n.H;e=n.g}],execute:function(){var i='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';var l=i;var b=n("mds_tab",function(){function n(n){var o=this;t(this,n);this.changedEvent=a(this,"mdsTabChange",7);this.currentItem=-1;this.queryContentItems=function(){return o.element.querySelectorAll("[slot=content]")};this.scrollTabs=function(){var n=o.tabItems[o.currentItem];o.tabs.scrollLeft=n.offsetLeft-o.tabs.offsetLeft-o.tabs.offsetWidth/2+n.offsetWidth/2};this.selectTabItem=function(n){o.tabItems.forEach((function(t,a){if(a===n){t.selected=true;o.changedEvent.emit({id:a,value:t.value});o.currentItem=a;o.scrollTabs()}else{t.selected=false}}))};this.selectContentItem=function(){o.contentItems.forEach((function(n,t){n.classList.add("hidden");if(t===o.currentItem){n.classList.remove("hidden")}}))}}n.prototype.componentWillLoad=function(){var n=this;this.tabItems=this.element.querySelectorAll("mds-tab-item");this.tabItems.forEach((function(t,a){if(!t.id){t.id="mds-tab-item-".concat(a)}if(t.selected){n.currentItem=a}}))};n.prototype.componentDidLoad=function(){var n;this.tabs=(n=this.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tabs");this.contentItems=this.queryContentItems();this.selectContentItem()};n.prototype.changeEventHandler=function(n){var t=this;this.tabItems.forEach((function(a,o){if(a.id===n.detail.target.id){t.selectTabItem(o)}else{a.selected=false}}));this.selectContentItem()};n.prototype.render=function(){return o(r,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},o("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},o("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),o("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},o("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))};Object.defineProperty(n.prototype,"element",{get:function(){return e(this)},enumerable:false,configurable:true});return n}());b.style=l}}}));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as n,c as t,h as a,H as o,g as r}from"./p-699c0b98.js";const e=class{constructor(a){n(this,a),this.changedEvent=t(this,"mdsTabChange",7),this.currentItem=-1,this.queryContentItems=()=>this.element.querySelectorAll("[slot=content]"),this.scrollTabs=()=>{const n=this.tabItems[this.currentItem];this.tabs.scrollLeft=n.offsetLeft-this.tabs.offsetLeft-this.tabs.offsetWidth/2+n.offsetWidth/2},this.selectTabItem=n=>{this.tabItems.forEach(((t,a)=>{a===n?(t.selected=!0,this.changedEvent.emit({id:a,value:t.value}),this.currentItem=a,this.scrollTabs()):t.selected=!1}))},this.selectContentItem=()=>{this.contentItems.forEach(((n,t)=>{n.classList.add("hidden"),t===this.currentItem&&n.classList.remove("hidden")}))}}componentWillLoad(){this.tabItems=this.element.querySelectorAll("mds-tab-item"),this.tabItems.forEach(((n,t)=>{n.id||(n.id=`mds-tab-item-${t}`),n.selected&&(this.currentItem=t)}))}componentDidLoad(){var n;this.tabs=null===(n=this.element.shadowRoot)||void 0===n?void 0:n.querySelector(".tabs"),this.contentItems=this.queryContentItems(),this.selectContentItem()}changeEventHandler(n){this.tabItems.forEach(((t,a)=>{t.id===n.detail.target.id?this.selectTabItem(a):t.selected=!1})),this.selectContentItem()}render(){return a(o,{key:"286da60fb24a1916d3ee941c83c71bdb17e1c6e0"},a("div",{key:"ed4487b4821ea5619207b9438595486bbcbd0f07",class:"tabs",part:"tabs"},a("slot",{key:"26b2e092d274a389dd61936b156bbf5d617b096d"})),a("div",{key:"65766aa0161c480a25df5a8427e1b083ef1925b7",class:"contents",part:"contents"},a("slot",{key:"3dabb8c898391570ceb083da1fd471547ab490cf",name:"content"})))}get element(){return r(this)}};e.style='@tailwind components;\n@tailwind utilities;\n\n.svg{\n\n display: -ms-flexbox;\n\n display: flex;\n}\n\n.svg svg{\n\n aspect-ratio: 1/1;\n\n height: 100%;\n\n width: 100%;\n}\n@tailwind utilities;\n\n/**\n * @prop --mds-tab-duration: Sets the animation duration on how the contents height is resized when the component switch from a content to another one\n * @prop --mds-tab-timing-function: Sets the animation timing function on how the contents height is resized when the component switch from a content to another one\n*/\n\n:host {\n\n --mds-tab-duration: .75s;\n --mds-tab-timing-function: cubic-bezier(1, 0, 0, 1);\n\n display: grid;\n}\n\n.tabs {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 0.5rem;\n border-width: 0.125rem;\n border-style: solid;\n border-color: transparent;\n padding: 0.5rem;\n -webkit-transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n -webkit-transition-duration: 150ms;\n transition-duration: 150ms;\n\n background-color: rgb(var(--theme-default-06-secondary-background));\n border-radius: 1rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n }\n\n.tabs::-webkit-scrollbar {\n display: none;\n}\n\n.contents {\n\n --mds-tab-contents-height: auto;\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n gap: 1.5rem;\n\n -ms-flex-align: start;\n\n align-items: flex-start;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -ms-flexbox;\n display: flex;\n height: var(--mds-tab-contents-height);\n overflow-x: auto;\n overflow-y: hidden;\n position: relative;\n scroll-behavior: smooth;\n -webkit-scroll-snap-type: x mandatory;\n -ms-scroll-snap-type: x mandatory;\n scroll-snap-type: x mandatory;\n -webkit-transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n transition: height var(--mds-tab-duration) var(--mds-tab-timing-function);\n}\n\n::slotted( [slot="content"] ){\n\n width: 100%;\n\n min-width: 100%;\n\n -webkit-animation-duration: var(--mds-tab-duration);\n\n animation-duration: var(--mds-tab-duration);\n -webkit-animation-fill-mode: forwards;\n animation-fill-mode: forwards;\n -webkit-animation-timing-function: var(--mds-tab-timing-function);\n animation-timing-function: var(--mds-tab-timing-function);\n -ms-flex-preferred-size: 0;\n flex-basis: 0;\n -ms-flex-positive: 1;\n flex-grow: 1;\n scroll-snap-align: start;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n\n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-tab-duration: 0s;\n\n -webkit-transition-duration: 0s;\n\n transition-duration: 0s;\n }\n \n .contents,\n .tabs {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n .tabs {\n border-color: rgb(var(--tone-neutral-08));\n }\n }\n}\n\n.static{\n\n position: static;\n}\n\n.fixed{\n\n position: fixed;\n}\n\n.absolute{\n\n position: absolute;\n}\n\n.grid{\n\n display: grid;\n}\n\n.contents{\n\n display: contents;\n}\n\n.hidden{\n\n display: none;\n}\n\n.auto-rows-min{\n\n grid-auto-rows: -webkit-min-content;\n\n grid-auto-rows: min-content;\n}\n\n.gap-100{\n\n gap: 0.25rem;\n}\n\n.gap-200{\n\n gap: 0.5rem;\n}\n\n.gap-600{\n\n gap: 1.5rem;\n}\n\n.rounded-lg{\n\n border-radius: 0.5rem;\n}\n\n.border{\n\n border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n fill: rgb(var(--tone-neutral-04));\n}\n\n.px-200{\n\n padding-left: 0.5rem;\n\n padding-right: 0.5rem;\n}\n\n.py-600{\n\n padding-top: 1.5rem;\n\n padding-bottom: 1.5rem;\n}\n\n.text-label-amaranth-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n --tw-text-opacity: 1;\n\n color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n@container style(--magma-pref-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .tabs {\n border-color: rgb(var(--tone-neutral-06));\n }\n }\n}\n\n@media (min-width: 768px){\n\n .tablet\\:grid-cols-\\[1fr_2fr\\]{\n\n grid-template-columns: 1fr 2fr;\n }\n}\n\n\n';export{e as mds_tab}
|