@mozaic-ds/web-components 0.6.2-beta.1 → 0.8.0
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/package.json +6 -3
- package/public/{DataTableDefaultAction.nested-4da4dc44.js → DataTableDefaultAction.nested-483f8bb0.js} +2 -2
- package/public/DataTableDefaultAction.nested-483f8bb0.js.map +1 -0
- package/public/adeo/{DataTableDefaultAction.nested-9f01417d.js → DataTableDefaultAction.nested-90536fe3.js} +2 -2
- package/public/adeo/DataTableDefaultAction.nested-90536fe3.js.map +1 -0
- package/public/adeo/components/accordion/Accordion.js +1 -1
- package/public/adeo/components/accordion/Accordion.js.map +1 -1
- package/public/adeo/components/chart/LineChart.js +1 -1
- package/public/adeo/components/chart/LineChart.js.map +1 -1
- package/public/adeo/components/datatable/DataTable.js +1 -1
- package/public/adeo/components/datatable/DataTable.js.map +1 -1
- package/public/adeo/components/datatable/DataTable.svelte +2 -0
- package/public/adeo/components/datatable/DataTableDefaultAction.nested.js +1 -1
- package/public/adeo/components/datatable/datatable.types.d.ts +1 -0
- package/public/adeo/components/datatable/datatable.types.d.ts.map +1 -1
- package/public/adeo/components/datatabledefaultaction/DataTableDefaultAction.nested.svelte +1 -1
- package/public/adeo/components/fileuploader/FileUploader.js +1 -1
- package/public/adeo/components/fileuploader/FileUploader.js.map +1 -1
- package/public/adeo/components/fileuploader/FileUploader.svelte +7 -0
- package/public/adeo/components/header/Header.js +1 -1
- package/public/adeo/components/header/Header.js.map +1 -1
- package/public/adeo/components/header/Header.svelte +2 -2
- package/public/adeo/components/link/Link.js +1 -1
- package/public/adeo/components/link/Link.js.map +1 -1
- package/public/adeo/components/link/Link.svelte +1 -1
- package/public/adeo/components/modal/Modal.js +1 -1
- package/public/adeo/components/progressbar/ProgressBar.js +1 -1
- package/public/adeo/components/sidebar/Sidebar.js +1 -1
- package/public/adeo/components/sidebar/Sidebar.js.map +1 -1
- package/public/adeo/components/sidebar/Sidebar.svelte +1 -1
- package/public/adeo/components/sidebar/sidebar-feature-group.nested.js +1 -1
- package/public/adeo/components/sidebar/sidebar-feature-group.nested.js.map +1 -1
- package/public/adeo/components/sidebar/sidebar-feature.nested.js +1 -1
- package/public/adeo/components/sidebar/sidebar-feature.nested.js.map +1 -1
- package/public/adeo/components/sidebar/sidebar-section.nested.js +1 -1
- package/public/adeo/components/sidebar/sidebar-section.nested.js.map +1 -1
- package/public/adeo/components/sidebar/sidebar-segment.nested.js +1 -1
- package/public/adeo/components/sidebar/sidebar-segment.nested.js.map +1 -1
- package/public/adeo/components/sidebar-section/sidebar-section.nested.svelte +2 -2
- package/public/adeo/components/sidebar-segment/sidebar-segment.nested.svelte +6 -3
- package/public/bricoman/{DataTableDefaultAction.nested-1c046074.js → DataTableDefaultAction.nested-928e5e2d.js} +2 -2
- package/public/bricoman/DataTableDefaultAction.nested-928e5e2d.js.map +1 -0
- package/public/bricoman/components/accordion/Accordion.js +1 -1
- package/public/bricoman/components/accordion/Accordion.js.map +1 -1
- package/public/bricoman/components/chart/LineChart.js +1 -1
- package/public/bricoman/components/chart/LineChart.js.map +1 -1
- package/public/bricoman/components/datatable/DataTable.js +1 -1
- package/public/bricoman/components/datatable/DataTable.js.map +1 -1
- package/public/bricoman/components/datatable/DataTable.svelte +2 -0
- package/public/bricoman/components/datatable/DataTableDefaultAction.nested.js +1 -1
- package/public/bricoman/components/datatable/datatable.types.d.ts +1 -0
- package/public/bricoman/components/datatable/datatable.types.d.ts.map +1 -1
- package/public/bricoman/components/datatabledefaultaction/DataTableDefaultAction.nested.svelte +1 -1
- package/public/bricoman/components/fileuploader/FileUploader.js +1 -1
- package/public/bricoman/components/fileuploader/FileUploader.js.map +1 -1
- package/public/bricoman/components/fileuploader/FileUploader.svelte +7 -0
- package/public/bricoman/components/header/Header.js +1 -1
- package/public/bricoman/components/header/Header.js.map +1 -1
- package/public/bricoman/components/header/Header.svelte +2 -2
- package/public/bricoman/components/link/Link.js +1 -1
- package/public/bricoman/components/link/Link.js.map +1 -1
- package/public/bricoman/components/link/Link.svelte +1 -1
- package/public/bricoman/components/modal/Modal.js +1 -1
- package/public/bricoman/components/progressbar/ProgressBar.js +1 -1
- package/public/bricoman/components/sidebar/Sidebar.js +1 -1
- package/public/bricoman/components/sidebar/Sidebar.js.map +1 -1
- package/public/bricoman/components/sidebar/Sidebar.svelte +1 -1
- package/public/bricoman/components/sidebar/sidebar-section.nested.js.map +1 -1
- package/public/bricoman/components/sidebar/sidebar-segment.nested.js +1 -1
- package/public/bricoman/components/sidebar/sidebar-segment.nested.js.map +1 -1
- package/public/bricoman/components/sidebar-section/sidebar-section.nested.svelte +2 -2
- package/public/bricoman/components/sidebar-segment/sidebar-segment.nested.svelte +6 -3
- package/public/components/accordion/Accordion.js +1 -1
- package/public/components/accordion/Accordion.js.map +1 -1
- package/public/components/chart/LineChart.js +1 -1
- package/public/components/chart/LineChart.js.map +1 -1
- package/public/components/datatable/DataTable.js +1 -1
- package/public/components/datatable/DataTable.js.map +1 -1
- package/public/components/datatable/DataTable.svelte +2 -0
- package/public/components/datatable/DataTableDefaultAction.nested.js +1 -1
- package/public/components/datatable/datatable.types.d.ts +1 -0
- package/public/components/datatable/datatable.types.d.ts.map +1 -1
- package/public/components/datatabledefaultaction/DataTableDefaultAction.nested.svelte +1 -1
- package/public/components/fileuploader/FileUploader.js +1 -1
- package/public/components/fileuploader/FileUploader.js.map +1 -1
- package/public/components/fileuploader/FileUploader.svelte +7 -0
- package/public/components/header/Header.js +1 -1
- package/public/components/header/Header.js.map +1 -1
- package/public/components/header/Header.svelte +2 -2
- package/public/components/link/Link.js +1 -1
- package/public/components/link/Link.js.map +1 -1
- package/public/components/link/Link.svelte +1 -1
- package/public/components/modal/Modal.js +1 -1
- package/public/components/progressbar/ProgressBar.js +1 -1
- package/public/components/sidebar/Sidebar.js +1 -1
- package/public/components/sidebar/Sidebar.js.map +1 -1
- package/public/components/sidebar/Sidebar.svelte +1 -1
- package/public/components/sidebar/sidebar-section.nested.js.map +1 -1
- package/public/components/sidebar/sidebar-segment.nested.js +1 -1
- package/public/components/sidebar/sidebar-segment.nested.js.map +1 -1
- package/public/components/sidebar-section/sidebar-section.nested.svelte +2 -2
- package/public/components/sidebar-segment/sidebar-segment.nested.svelte +6 -3
- package/public/utilities/components/datatable/datatable.types.d.ts +1 -0
- package/public/utilities/components/datatable/datatable.types.d.ts.map +1 -1
- package/public/utilities/stories/fileuploader/FileUploader.stories.d.ts +1 -0
- package/public/utilities/stories/fileuploader/FileUploader.stories.d.ts.map +1 -1
- package/public/utilities/stories/header/Header.stories.d.ts.map +1 -1
- package/public/DataTableDefaultAction.nested-4da4dc44.js.map +0 -1
- package/public/adeo/DataTableDefaultAction.nested-9f01417d.js.map +0 -1
- package/public/bricoman/DataTableDefaultAction.nested-1c046074.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-feature-group.nested.js","sources":["../../../../src/components/sidebar/sidebar-feature-group.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { FeatureGroup, Feature, A11yLabels } from './sidebar.types';\n import FeatureComponent from './sidebar-feature.nested.svelte';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n Selection,\n } from './sidebar-service';\n import { EventHandler } from '../../utilities/EventHandler';\n\n export let featureGroup: FeatureGroup;\n export let expand: boolean;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let content: HTMLElement;\n\n $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);\n $: updateContentCSS(expand, $isSidebarOpen);\n\n let isSelected = false;\n\n let label: HTMLElement;\n\n const mediumIconStyle = 'width: 24px; height: 24px;';\n\n function updateSelection(\n isExpanded: boolean,\n isOpen: boolean,\n group: FeatureGroup,\n selection?: Selection,\n ): void {\n isSelected =\n (selection?.lv0 &&\n group.code === selection?.lv0?.code &&\n (!selection.lv1 || !isExpanded || !isOpen)) ??\n false;\n }\n\n // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n if (content) {\n content.style.height = '';\n content.style.transition = 'none';\n const startHeight = window.getComputedStyle(content).height;\n\n content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n const height = window.getComputedStyle(content).height;\n content.style.height = startHeight;\n\n // wait until the next frame so that everything has time to update before starting the transition\n requestAnimationFrame(() => {\n content.style.transition = '';\n requestAnimationFrame(() => {\n content.style.height = height;\n });\n });\n\n // Clear the saved height values after the transition\n const handler = () => {\n content.style.height = '';\n content.removeEventListener('transitionend', handler);\n };\n\n content.addEventListener('transitionend', handler);\n }\n }\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"2rem\"`;\n }\n\n function handleClick(feature: Feature) {\n if (!feature.disabled) {\n // Only select the feature if it is the last level item\n if (feature.items?.length) {\n eventHandler.dispatch('feature-click', feature);\n } else {\n selectFeature(feature.code);\n }\n }\n }\n</script>\n\n<button\n class=\"mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'}\"\n aria-label={featureGroup.label}\n aria-expanded={$isSidebarOpen && expand}\n aria-controls=\"{featureGroup.code}-list\"\n id={featureGroup.code}\n>\n <span class=\"mc-feature-group__container\">\n {#if featureGroup.icon}\n {@html `<${generateIcon(\n featureGroup.icon,\n )} class=\"mc-feature-group__icon\" style=\"${mediumIconStyle}\" />`}\n {/if}\n {#if $isSidebarOpen}\n <span class=\"mc-feature-group__label\" bind:this={label}>\n {featureGroup.label}\n </span>\n {#if label?.offsetHeight < label?.scrollHeight}\n <div aria-hidden=\"true\" class=\"mc-feature-group__label__tooltip\">\n <div class=\"mc-feature-group__label__tooltip__pointer\"><div /></div>\n <span>{featureGroup.label}</span>\n </div>\n {/if}\n {#if !expand}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path\n d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n >\n {/if}\n {/if}\n </span>\n</button>\n<ul\n class=\"mc-feature-group__content is-close\"\n aria-hidden={!$isSidebarOpen || !expand}\n id=\"{featureGroup.code}-list\"\n bind:this={content}\n>\n {#each featureGroup.items as feature}\n <li on:click|stopPropagation={() => handleClick(feature)}>\n <FeatureComponent {feature} {a11yLabels} />\n </li>\n {/each}\n</ul>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-feature-group {\n background: none;\n border: none;\n color: $color-sidebar-text-color;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n text-align: initial;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &__icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n display: flex;\n align-items: center;\n margin: 5px 0;\n padding: 8px 0px;\n @include transition(margin 300ms ease-in-out);\n }\n\n &__label {\n margin: 0 8px;\n width: 200px;\n min-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &__tooltip {\n opacity: 0;\n transition: 0s opacity;\n background-color: $color-sidebar-divider-background;\n border: 1px solid $color-sidebar-text-color;\n border-radius: 4px;\n position: absolute;\n pointer-events: none;\n left: calc(100% - 16px);\n padding: 8px 16px;\n width: 188px;\n\n &__pointer {\n position: absolute;\n top: 50%;\n left: -8px;\n top: calc(50% - 6px);\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid white;\n\n & div {\n position: relative;\n top: -6px;\n left: 2px;\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-divider-background;\n }\n }\n }\n\n &:hover + .mc-feature-group__label__tooltip {\n opacity: 1;\n transition-delay: 1s;\n }\n }\n\n &__content {\n overflow: hidden;\n @include transition(height 300ms ease-in-out);\n &.is-close {\n height: 0;\n }\n\n &.is-open {\n height: auto;\n }\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &.is-close {\n .mc-feature-group__container {\n margin: 0 20px;\n width: 24px;\n }\n }\n\n &.is-open {\n .mc-feature-group__container {\n margin: 0 32px;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-feature-group__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n ul,\n li {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n width: 100%;\n }\n\n ul {\n align-items: start;\n flex-direction: column;\n justify-content: center;\n\n li {\n flex-direction: column;\n box-sizing: border-box;\n }\n }\n</style>\n"],"names":["raw_value","generateIcon","ctx","icon","mediumIconStyle","dirty","html_tag","p","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","insert","target","span","anchor","set_data","t0","t1_value","div2","append","div1","t1","svg","path","li","create_if_block_3","create_if_block","each_value","items","length","i","attr","button","button_aria_label_value","button_aria_expanded_value","button_aria_controls_value","code","button_id_value","ul","ul_aria_hidden_value","ul_id_value","current","each_blocks","iconname","content","featureGroup","$$props","expand","a11yLabels","eventHandler","EventHandler","isSelected","handleClick","feature","disabled","_a","dispatch","selectFeature","isExpanded","isOpen","group","selection","$isSidebarOpen","_b","$selectedFeature","lv0","lv1","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$$value"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sidebar-feature-group.nested.js","sources":["../../../../src/components/sidebar/sidebar-feature-group.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { FeatureGroup, Feature, A11yLabels } from './sidebar.types';\n import FeatureComponent from './sidebar-feature.nested.svelte';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n Selection,\n } from './sidebar-service';\n import { EventHandler } from '../../utilities/EventHandler';\n\n export let featureGroup: FeatureGroup;\n export let expand: boolean;\n export let a11yLabels: A11yLabels;\n let eventHandler = new EventHandler();\n let content: HTMLElement;\n\n $: updateSelection(expand, $isSidebarOpen, featureGroup, $selectedFeature);\n $: updateContentCSS(expand, $isSidebarOpen);\n\n let isSelected = false;\n\n let label: HTMLElement;\n\n const mediumIconStyle = 'width: 24px; height: 24px;';\n\n function updateSelection(\n isExpanded: boolean,\n isOpen: boolean,\n group: FeatureGroup,\n selection?: Selection,\n ): void {\n isSelected =\n (selection?.lv0 &&\n group.code === selection?.lv0?.code &&\n (!selection.lv1 || !isExpanded || !isOpen)) ??\n false;\n }\n\n // Update the CSS programatically to have a nice animation on height between 0px and 'auto'\n function updateContentCSS(isExpanded: boolean, isOpen: boolean): void {\n if (content) {\n content.style.height = '';\n content.style.transition = 'none';\n const startHeight = window.getComputedStyle(content).height;\n\n content.classList.add(isOpen && isExpanded ? 'is-open' : 'is-close');\n content.classList.remove(isOpen && isExpanded ? 'is-close' : 'is-open');\n\n const height = window.getComputedStyle(content).height;\n content.style.height = startHeight;\n\n // wait until the next frame so that everything has time to update before starting the transition\n requestAnimationFrame(() => {\n content.style.transition = '';\n requestAnimationFrame(() => {\n content.style.height = height;\n });\n });\n\n // Clear the saved height values after the transition\n const handler = () => {\n content.style.height = '';\n content.removeEventListener('transitionend', handler);\n };\n\n content.addEventListener('transitionend', handler);\n }\n }\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"2rem\"`;\n }\n\n function handleClick(feature: Feature) {\n if (!feature.disabled) {\n // Only select the feature if it is the last level item\n if (feature.items?.length) {\n eventHandler.dispatch('feature-click', feature);\n } else {\n selectFeature(feature.code);\n }\n }\n }\n</script>\n\n<button\n class=\"mc-feature-group {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'}\"\n aria-label={featureGroup.label}\n aria-expanded={$isSidebarOpen && expand}\n aria-controls=\"{featureGroup.code}-list\"\n id={featureGroup.code}\n>\n <span class=\"mc-feature-group__container\">\n {#if featureGroup.icon}\n {@html `<${generateIcon(\n featureGroup.icon,\n )} class=\"mc-feature-group__icon\" style=\"${mediumIconStyle}\" />`}\n {/if}\n {#if $isSidebarOpen}\n <span class=\"mc-feature-group__label\" bind:this={label}>\n {featureGroup.label}\n </span>\n {#if label?.offsetHeight < label?.scrollHeight}\n <div aria-hidden=\"true\" class=\"mc-feature-group__label__tooltip\">\n <div class=\"mc-feature-group__label__tooltip__pointer\"><div /></div>\n <span>{featureGroup.label}</span>\n </div>\n {/if}\n {#if !expand}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path\n d=\"M13 7H9V3a1 1 0 00-2 0v4H3a1 1 0 000 2h4v4a1 1 0 002 0V9h4a1 1 0 000-2z\"\n /></svg\n >\n {:else}\n <svg\n class=\"mc-feature-group__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path d=\"M12 9H4a1 1 0 010-2h8a1 1 0 010 2z\" /></svg\n >\n {/if}\n {/if}\n </span>\n</button>\n<ul\n class=\"mc-feature-group__content is-close\"\n aria-hidden={!$isSidebarOpen || !expand}\n id=\"{featureGroup.code}-list\"\n bind:this={content}\n>\n {#each featureGroup.items as feature}\n <li on:click|stopPropagation={() => handleClick(feature)}>\n <FeatureComponent {feature} {a11yLabels} />\n </li>\n {/each}\n</ul>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-feature-group {\n background: none;\n border: none;\n color: $color-sidebar-text-color;\n cursor: pointer;\n font-size: inherit;\n font-family: inherit;\n text-align: initial;\n margin: 0;\n padding: 0;\n overflow: hidden;\n\n &__icon {\n fill: $color-sidebar-icon;\n }\n\n &__container {\n display: flex;\n align-items: center;\n margin: 5px 0;\n padding: 8px 0px;\n @include transition(margin 300ms ease-in-out);\n }\n\n &__label {\n margin: 0 8px;\n width: 200px;\n min-width: 200px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &__tooltip {\n opacity: 0;\n transition: 0s opacity;\n background-color: $color-sidebar-divider-background;\n border: 1px solid $color-sidebar-text-color;\n border-radius: 4px;\n position: absolute;\n pointer-events: none;\n left: calc(100% - 16px);\n padding: 8px 16px;\n width: 188px;\n\n &__pointer {\n position: absolute;\n top: 50%;\n left: -8px;\n top: calc(50% - 6px);\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid white;\n\n & div {\n position: relative;\n top: -6px;\n left: 2px;\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-divider-background;\n }\n }\n }\n\n &:hover + .mc-feature-group__label__tooltip {\n opacity: 1;\n transition-delay: 1s;\n }\n }\n\n &__content {\n overflow: hidden;\n @include transition(height 300ms ease-in-out);\n &.is-close {\n height: 0;\n }\n\n &.is-open {\n height: auto;\n }\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &.is-close {\n .mc-feature-group__container {\n margin: 0 20px;\n width: 24px;\n }\n }\n\n &.is-open {\n .mc-feature-group__container {\n margin: 0 32px;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-feature-group__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n\n ul,\n li {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n width: 100%;\n }\n\n ul {\n align-items: start;\n flex-direction: column;\n justify-content: center;\n\n li {\n flex-direction: column;\n box-sizing: border-box;\n }\n }\n</style>\n"],"names":["raw_value","generateIcon","ctx","icon","mediumIconStyle","dirty","html_tag","p","t0_value","label","if_block0","offsetHeight","scrollHeight","create_if_block_2","create_if_block_1","insert","target","span","anchor","set_data","t0","t1_value","div2","append","div1","t1","svg","path","li","create_if_block_3","create_if_block","each_value","items","length","i","attr","button","button_aria_label_value","button_aria_expanded_value","button_aria_controls_value","code","button_id_value","ul","ul_aria_hidden_value","ul_id_value","current","each_blocks","iconname","content","featureGroup","$$props","expand","a11yLabels","eventHandler","EventHandler","isSelected","handleClick","feature","disabled","_a","dispatch","selectFeature","isExpanded","isOpen","group","selection","$isSidebarOpen","_b","$selectedFeature","lv0","lv1","$$invalidate","style","height","transition","startHeight","window","getComputedStyle","classList","add","remove","requestAnimationFrame","handler","removeEventListener","addEventListener","updateContentCSS","$$value"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{P as e,i as
|
|
1
|
+
import{P as e,i as t,s as i,Q as a,K as s,b as l,n,o as d,ab as o,v as r,e as f,T as c,d as b,t as x,g as p,j as u,k as v}from"../../index-c33b3772.js";import{i as m,s as z}from"../../sidebar-service-275bf9ef.js";function _(e){a(e,"svelte-1fz7x3n",".mc-sidebar-feature.svelte-1fz7x3n.svelte-1fz7x3n{font-size:16px;min-width:200px;cursor:pointer;-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;text-decoration:none;color:#ffffff;line-height:22px;overflow:hidden}.mc-sidebar-feature__container.svelte-1fz7x3n.svelte-1fz7x3n{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container.svelte-1fz7x3n span.svelte-1fz7x3n{max-width:200px;min-width:200px}.mc-sidebar-feature__icon.svelte-1fz7x3n.svelte-1fz7x3n{fill:#ffffff}.mc-sidebar-feature__icon-disabled.svelte-1fz7x3n.svelte-1fz7x3n{fill:#92a2a9}.mc-sidebar-feature__label.svelte-1fz7x3n.svelte-1fz7x3n{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-right:8px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip.svelte-1fz7x3n.svelte-1fz7x3n{opacity:0;-webkit-transition:0s opacity;-o-transition:0s opacity;transition:0s opacity;background-color:#5b737d;border:1px solid #ffffff;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer.svelte-1fz7x3n.svelte-1fz7x3n{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #ffffff}.mc-sidebar-feature__label__tooltip__pointer.svelte-1fz7x3n div.svelte-1fz7x3n{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label.svelte-1fz7x3n:hover+.mc-sidebar-feature__label__tooltip.svelte-1fz7x3n{opacity:1;-webkit-transition-delay:1s;-o-transition-delay:1s;transition-delay:1s}.mc-sidebar-feature__icon.svelte-1fz7x3n.svelte-1fz7x3n{margin-right:8px}.mc-sidebar-feature.is-selected.svelte-1fz7x3n.svelte-1fz7x3n{background:#5b737d}.mc-sidebar-feature.is-close.svelte-1fz7x3n.svelte-1fz7x3n{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:0px 0px}.mc-sidebar-feature.is-close.svelte-1fz7x3n .mc-sidebar-feature__container.svelte-1fz7x3n{-o-transition:padding-left 300ms ease-in-out;-webkit-transition:padding-left 300ms ease-in-out;transition:padding-left 300ms ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open.svelte-1fz7x3n.svelte-1fz7x3n{-o-transition:padding 300ms ease-in-out;-webkit-transition:padding 300ms ease-in-out;transition:padding 300ms ease-in-out;padding:0px 32px}.mc-sidebar-feature.is-open.svelte-1fz7x3n .mc-sidebar-feature__container.svelte-1fz7x3n{-o-transition:padding-left 300ms ease-in-out;-webkit-transition:padding-left 300ms ease-in-out;transition:padding-left 300ms ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled.svelte-1fz7x3n.svelte-1fz7x3n{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature.svelte-1fz7x3n.svelte-1fz7x3n:hover{background:#405d68}.mc-sidebar-feature.svelte-1fz7x3n.svelte-1fz7x3n:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-feature.svelte-1fz7x3n:focus-visible .mc-sidebar-feature__container.svelte-1fz7x3n{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}")}function h(e){let t,i,a,s,n,o,r,m,z,_,h,g,w,k,y=e[0].label+"";return{c(){t=f("span"),i=f("div"),a=c("svg"),s=c("g"),n=c("path"),o=c("defs"),r=c("clipPath"),m=c("path"),z=b(),_=f("span"),h=x(y),p(n,"fill-rule","evenodd"),p(n,"d","M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z"),p(s,"clip-path","url(#a)"),p(m,"d","M0 0h16v16H0z"),p(r,"id","a"),p(a,"class","mc-sidebar-feature__icon-disabled svelte-1fz7x3n"),p(a,"width","16px"),p(a,"height","16px"),p(a,"viewBox","0 0 16 16"),p(_,"class","svelte-1fz7x3n"),p(i,"class","mc-sidebar-feature__container svelte-1fz7x3n"),p(t,"aria-label",g=e[0].label),p(t,"aria-disabled","true"),p(t,"class",w="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" is-disabled svelte-1fz7x3n"),p(t,"id",k=e[0].code)},m(e,d){l(e,t,d),u(t,i),u(i,a),u(a,s),u(s,n),u(a,o),u(o,r),u(r,m),u(i,z),u(i,_),u(_,h)},p(e,i){1&i&&y!==(y=e[0].label+"")&&v(h,y),1&i&&g!==(g=e[0].label)&&p(t,"aria-label",g),6&i&&w!==(w="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" is-disabled svelte-1fz7x3n")&&p(t,"class",w),1&i&&k!==(k=e[0].code)&&p(t,"id",k)},d(e){e&&d(t)}}}function g(e){let t,i,a,s,n,o,r,c,m,z,_,h=e[0].label+"",g=e[5]&&w(e),y="_blank"===e[0].embedded&&k();return{c(){t=f("a"),i=f("div"),a=f("span"),s=x(h),n=b(),g&&g.c(),o=b(),y&&y.c(),p(a,"class","mc-sidebar-feature__label svelte-1fz7x3n"),p(i,"class","mc-sidebar-feature__container svelte-1fz7x3n"),p(t,"aria-label",r=""+(e[0].label+e[3])),p(t,"href",c=e[0].href??"javascript:void(null)"),p(t,"target",m=e[0].embedded),p(t,"class",z="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" svelte-1fz7x3n"),p(t,"id",_=e[0].code)},m(d,r){l(d,t,r),u(t,i),u(i,a),u(a,s),e[8](a),u(i,n),g&&g.m(i,null),u(i,o),y&&y.m(i,null)},p(e,a){1&a&&h!==(h=e[0].label+"")&&v(s,h),e[5]?g?g.p(e,a):(g=w(e),g.c(),g.m(i,o)):g&&(g.d(1),g=null),"_blank"===e[0].embedded?y||(y=k(),y.c(),y.m(i,null)):y&&(y.d(1),y=null),9&a&&r!==(r=""+(e[0].label+e[3]))&&p(t,"aria-label",r),1&a&&c!==(c=e[0].href??"javascript:void(null)")&&p(t,"href",c),1&a&&m!==(m=e[0].embedded)&&p(t,"target",m),6&a&&z!==(z="mc-sidebar-feature "+(e[2]?"is-selected":"")+" "+(e[1]?"is-open":"is-close")+" svelte-1fz7x3n")&&p(t,"class",z),1&a&&_!==(_=e[0].code)&&p(t,"id",_)},d(i){i&&d(t),e[8](null),g&&g.d(),y&&y.d()}}}function w(e){let t,i,a,s,n,o=e[0].label+"";return{c(){t=f("div"),i=f("div"),i.innerHTML='<div class="svelte-1fz7x3n"></div>',a=b(),s=f("span"),n=x(o),p(i,"class","mc-sidebar-feature__label__tooltip__pointer svelte-1fz7x3n"),p(s,"class","svelte-1fz7x3n"),p(t,"aria-hidden","true"),p(t,"class","mc-sidebar-feature__label__tooltip svelte-1fz7x3n")},m(e,d){l(e,t,d),u(t,i),u(t,a),u(t,s),u(s,n)},p(e,t){1&t&&o!==(o=e[0].label+"")&&v(n,o)},d(e){e&&d(t)}}}function k(e){let t,i;return{c(){t=c("svg"),i=c("path"),p(i,"fill-rule","evenodd"),p(i,"d","M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z"),p(t,"class","mc-sidebar-feature__icon svelte-1fz7x3n"),p(t,"width","16px"),p(t,"height","16px"),p(t,"viewBox","0 0 16 16")},m(e,a){l(e,t,a),u(t,i)},d(e){e&&d(t)}}}function y(e){let t;function i(e,t){return e[0].disabled?h:g}let a=i(e),o=a(e);return{c(){o.c(),t=s()},m(e,i){o.m(e,i),l(e,t,i)},p(e,[s]){a===(a=i(e))&&o?o.p(e,s):(o.d(1),o=a(e),o&&(o.c(),o.m(t.parentNode,t)))},i:n,o:n,d(e){o.d(e),e&&d(t)}}}function $(e,t,i){let a,s;o(e,m,(e=>i(1,a=e))),o(e,z,(e=>i(7,s=e)));let l,n,d,{feature:f}=t,{a11yLabels:c}=t,b=!1;return e.$$set=e=>{"feature"in e&&i(0,f=e.feature),"a11yLabels"in e&&i(6,c=e.a11yLabels)},e.$$.update=()=>{129&e.$$.dirty&&function(e,t){var a,s,l;i(2,b=null!==(l=(null==t?void 0:t.lv1)&&e.code===(null===(a=null==t?void 0:t.lv1)||void 0===a?void 0:a.code)||(null==t?void 0:t.lv2)&&e.code===(null===(s=null==t?void 0:t.lv2)||void 0===s?void 0:s.code))&&void 0!==l&&l)}(f,s),65&e.$$.dirty&&function(e,t){t.embedded?i(3,l=(null==e?void 0:e["external-link-suffix"])?` (${e["external-link-suffix"]})`:" (link to a new window)"):i(3,l="")}(c,f),2&e.$$.dirty&&setTimeout((()=>{i(5,d=(null==n?void 0:n.offsetHeight)<(null==n?void 0:n.scrollHeight))}),500)},[f,a,b,l,n,d,c,s,function(e){r[e?"unshift":"push"]((()=>{n=e,i(4,n)}))}]}class H extends e{constructor(e){super(),t(this,e,$,y,i,{feature:0,a11yLabels:6},_)}}export{H as default};
|
|
2
2
|
//# sourceMappingURL=sidebar-feature.nested.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-feature.nested.js","sources":["../../../../src/components/sidebar/sidebar-feature.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import { isSidebarOpen, selectedFeature, Selection } from './sidebar-service';\n import type { A11yLabels, Feature } from './sidebar.types';\n\n export let feature: Feature;\n export let a11yLabels: A11yLabels;\n\n $: updateSelection(feature, $selectedFeature);\n $: updatA11yLabel(a11yLabels, feature);\n\n let isSelected = false;\n let ariaSuffix: string;\n\n let label: HTMLElement;\n let showTooltip: boolean;\n $: updateTooltip($isSidebarOpen);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function updateTooltip(_: boolean) {\n setTimeout(() => {\n showTooltip = label?.offsetHeight < label?.scrollHeight;\n }, 500);\n }\n\n function updateSelection(feature: Feature, selection?: Selection) {\n isSelected =\n ((selection?.lv1 && feature.code === selection?.lv1?.code) ||\n (selection?.lv2 && feature.code === selection?.lv2?.code)) ??\n false;\n }\n\n function updatA11yLabel(label: A11yLabels, feature: Feature) {\n if (feature.embedded) {\n ariaSuffix = label?.['external-link-suffix']\n ? ` (${label['external-link-suffix']})`\n : ' (link to a new window)';\n } else {\n ariaSuffix = '';\n }\n }\n</script>\n\n{#if !feature.disabled}\n <a\n aria-label=\"{feature.label}{ariaSuffix}\"\n href={feature.href ?? 'javascript:void(null)'}\n target={feature.embedded}\n class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'}\"\n id={feature.code}\n >\n <div class=\"mc-sidebar-feature__container\">\n <span class=\"mc-sidebar-feature__label\" bind:this={label}\n >{feature.label}</span\n >\n {#if showTooltip}\n <div aria-hidden=\"true\" class=\"mc-sidebar-feature__label__tooltip\">\n <div class=\"mc-sidebar-feature__label__tooltip__pointer\"><div /></div>\n <span>{feature.label}</span>\n </div>\n {/if}\n {#if feature.embedded === '_blank'}\n <svg\n class=\"mc-sidebar-feature__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path\n fill-rule=\"evenodd\"\n d=\"M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z\"\n /></svg\n >\n {/if}\n </div>\n </a>\n{:else}\n <span\n aria-label={feature.label}\n aria-disabled=\"true\"\n class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'} is-disabled\"\n id={feature.code}\n >\n <div class=\"mc-sidebar-feature__container\">\n <svg\n class=\"mc-sidebar-feature__icon-disabled\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><g clip-path=\"url(#a)\"\n ><path\n fill-rule=\"evenodd\"\n d=\"M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z\"\n /></g\n ><defs><clipPath id=\"a\"><path d=\"M0 0h16v16H0z\" /></clipPath></defs\n ></svg\n >\n <span>{feature.label}</span>\n </div>\n </span>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar-feature {\n font-size: 16px;\n min-width: 200px;\n cursor: pointer;\n flex: 1;\n display: flex;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n overflow: hidden;\n\n &__container {\n display: flex;\n align-items: center;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 8px;\n\n span {\n max-width: 200px;\n min-width: 200px;\n }\n }\n\n &__icon {\n fill: $color-sidebar-icon;\n }\n\n &__icon-disabled {\n fill: $color-sidebar-feature-disabled-background;\n }\n\n &__label {\n flex: 1;\n margin-right: 8px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &__tooltip {\n opacity: 0;\n transition: 0s opacity;\n background-color: $color-sidebar-divider-background;\n border: 1px solid $color-sidebar-text-color;\n border-radius: 4px;\n position: absolute;\n pointer-events: none;\n left: calc(100% - 16px);\n padding: 8px 16px;\n width: 188px;\n\n &__pointer {\n position: absolute;\n top: 50%;\n left: -8px;\n top: calc(50% - 6px);\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-text-color;\n\n & div {\n position: relative;\n top: -6px;\n left: 2px;\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-divider-background;\n }\n }\n }\n\n &:hover + .mc-sidebar-feature__label__tooltip {\n opacity: 1;\n transition-delay: 1s;\n }\n }\n\n &__icon {\n margin-right: 8px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &.is-close {\n @include transition(padding 300ms ease-in-out);\n padding: 0px 0px;\n\n .mc-sidebar-feature__container {\n @include transition(padding-left 300ms ease-in-out);\n padding-left: 20px;\n width: 24px;\n }\n }\n\n &.is-open {\n @include transition(padding 300ms ease-in-out);\n padding: 0px 32px;\n\n .mc-sidebar-feature__container {\n @include transition(padding-left 300ms ease-in-out);\n padding-left: 32px;\n }\n }\n\n &.is-disabled {\n color: $color-sidebar-feature-disabled-background;\n fill: $color-sidebar-feature-disabled-background;\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-feature__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n</style>\n"],"names":["t1_value","ctx","label","attr","span1","span1_aria_label_value","span1_id_value","code","insert","target","anchor","append","div","svg","g","path0","defs","clipPath","path1","span0","dirty","set_data","t1","t0_value","create_if_block_2","embedded","create_if_block_1","href","a","a_target_value","a_id_value","span","t0","div2","div1","path","disabled","create_if_block","ariaSuffix","showTooltip","feature","$$props","a11yLabels","isSelected","selection","_c","lv1","_a","lv2","_b","updateSelection","$selectedFeature","$$invalidate","updatA11yLabel","setTimeout","offsetHeight","scrollHeight","$$value"],"mappings":"
|
|
1
|
+
{"version":3,"file":"sidebar-feature.nested.js","sources":["../../../../src/components/sidebar/sidebar-feature.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import { isSidebarOpen, selectedFeature, Selection } from './sidebar-service';\n import type { A11yLabels, Feature } from './sidebar.types';\n\n export let feature: Feature;\n export let a11yLabels: A11yLabels;\n\n $: updateSelection(feature, $selectedFeature);\n $: updatA11yLabel(a11yLabels, feature);\n\n let isSelected = false;\n let ariaSuffix: string;\n\n let label: HTMLElement;\n let showTooltip: boolean;\n $: updateTooltip($isSidebarOpen);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n function updateTooltip(_: boolean) {\n setTimeout(() => {\n showTooltip = label?.offsetHeight < label?.scrollHeight;\n }, 500);\n }\n\n function updateSelection(feature: Feature, selection?: Selection) {\n isSelected =\n ((selection?.lv1 && feature.code === selection?.lv1?.code) ||\n (selection?.lv2 && feature.code === selection?.lv2?.code)) ??\n false;\n }\n\n function updatA11yLabel(label: A11yLabels, feature: Feature) {\n if (feature.embedded) {\n ariaSuffix = label?.['external-link-suffix']\n ? ` (${label['external-link-suffix']})`\n : ' (link to a new window)';\n } else {\n ariaSuffix = '';\n }\n }\n</script>\n\n{#if !feature.disabled}\n <a\n aria-label=\"{feature.label}{ariaSuffix}\"\n href={feature.href ?? 'javascript:void(null)'}\n target={feature.embedded}\n class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'}\"\n id={feature.code}\n >\n <div class=\"mc-sidebar-feature__container\">\n <span class=\"mc-sidebar-feature__label\" bind:this={label}\n >{feature.label}</span\n >\n {#if showTooltip}\n <div aria-hidden=\"true\" class=\"mc-sidebar-feature__label__tooltip\">\n <div class=\"mc-sidebar-feature__label__tooltip__pointer\"><div /></div>\n <span>{feature.label}</span>\n </div>\n {/if}\n {#if feature.embedded === '_blank'}\n <svg\n class=\"mc-sidebar-feature__icon\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><path\n fill-rule=\"evenodd\"\n d=\"M9 2a1 1 0 000 2h1.586L6.293 8.293a1 1 0 001.414 1.414L12 5.414V7a1 1 0 102 0V3a1 1 0 00-1-1H9zM3 4a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1v-2a1 1 0 10-2 0v1H4V6h1a1 1 0 000-2H3z\"\n /></svg\n >\n {/if}\n </div>\n </a>\n{:else}\n <span\n aria-label={feature.label}\n aria-disabled=\"true\"\n class=\"mc-sidebar-feature {isSelected ? 'is-selected' : ''} {$isSidebarOpen\n ? 'is-open'\n : 'is-close'} is-disabled\"\n id={feature.code}\n >\n <div class=\"mc-sidebar-feature__container\">\n <svg\n class=\"mc-sidebar-feature__icon-disabled\"\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n ><g clip-path=\"url(#a)\"\n ><path\n fill-rule=\"evenodd\"\n d=\"M8 2a3 3 0 00-3 3v1H4a1 1 0 00-1 1v6a1 1 0 001 1h8a1 1 0 001-1V7a1 1 0 00-1-1h-1V5a3 3 0 00-3-3zm1 4V5a1 1 0 10-2 0v1h2zm-4 6V8h6v4H5z\"\n /></g\n ><defs><clipPath id=\"a\"><path d=\"M0 0h16v16H0z\" /></clipPath></defs\n ></svg\n >\n <span>{feature.label}</span>\n </div>\n </span>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar-feature {\n font-size: 16px;\n min-width: 200px;\n cursor: pointer;\n flex: 1;\n display: flex;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n overflow: hidden;\n\n &__container {\n display: flex;\n align-items: center;\n width: 100%;\n padding-top: 8px;\n padding-bottom: 8px;\n\n span {\n max-width: 200px;\n min-width: 200px;\n }\n }\n\n &__icon {\n fill: $color-sidebar-icon;\n }\n\n &__icon-disabled {\n fill: $color-sidebar-feature-disabled-background;\n }\n\n &__label {\n flex: 1;\n margin-right: 8px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n -webkit-box-orient: vertical;\n\n &__tooltip {\n opacity: 0;\n transition: 0s opacity;\n background-color: $color-sidebar-divider-background;\n border: 1px solid $color-sidebar-text-color;\n border-radius: 4px;\n position: absolute;\n pointer-events: none;\n left: calc(100% - 16px);\n padding: 8px 16px;\n width: 188px;\n\n &__pointer {\n position: absolute;\n top: 50%;\n left: -8px;\n top: calc(50% - 6px);\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-text-color;\n\n & div {\n position: relative;\n top: -6px;\n left: 2px;\n width: 0;\n height: 0;\n border-top: 6px solid transparent;\n border-bottom: 6px solid transparent;\n border-right: 8px solid $color-sidebar-divider-background;\n }\n }\n }\n\n &:hover + .mc-sidebar-feature__label__tooltip {\n opacity: 1;\n transition-delay: 1s;\n }\n }\n\n &__icon {\n margin-right: 8px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n &.is-close {\n @include transition(padding 300ms ease-in-out);\n padding: 0px 0px;\n\n .mc-sidebar-feature__container {\n @include transition(padding-left 300ms ease-in-out);\n padding-left: 20px;\n width: 24px;\n }\n }\n\n &.is-open {\n @include transition(padding 300ms ease-in-out);\n padding: 0px 32px;\n\n .mc-sidebar-feature__container {\n @include transition(padding-left 300ms ease-in-out);\n padding-left: 32px;\n }\n }\n\n &.is-disabled {\n color: $color-sidebar-feature-disabled-background;\n fill: $color-sidebar-feature-disabled-background;\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-feature__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n }\n</style>\n"],"names":["t1_value","ctx","label","attr","span1","span1_aria_label_value","span1_id_value","code","insert","target","anchor","append","div","svg","g","path0","defs","clipPath","path1","span0","dirty","set_data","t1","t0_value","create_if_block_2","embedded","create_if_block_1","href","a","a_target_value","a_id_value","span","t0","div2","div1","path","disabled","create_if_block","ariaSuffix","showTooltip","feature","$$props","a11yLabels","isSelected","selection","_c","lv1","_a","lv2","_b","updateSelection","$selectedFeature","$$invalidate","updatA11yLabel","setTimeout","offsetHeight","scrollHeight","$$value"],"mappings":"wsHAqGaA,EAAAC,KAAQC,MAAK,mlBArBVC,EAAAC,EAAA,aAAAC,EAAAJ,KAAQC,wEAEOD,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,2CACAE,EAAAC,EAAA,KAAAE,EAAAL,KAAQM,cANdC,EAwBMC,EAAAL,EAAAM,GAhBJC,EAeKP,EAAAQ,GAdHD,EAYAC,EAAAC,GAPGF,EAKAE,EAAAC,GAJEH,EAGCG,EAAAC,GACHJ,EACAE,EAAAG,GADML,EAAsDK,EAAAC,GAArCN,EAA0BM,EAAAC,UAGpDP,EAA2BC,EAAAO,kBAApB,EAAAC,GAAApB,KAAAA,EAAAC,KAAQC,MAAK,KAAAmB,EAAAC,EAAAtB,GArBV,EAAAoB,GAAAf,KAAAA,EAAAJ,KAAQC,+DAEOD,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,2DACA,EAAAmB,GAAAd,KAAAA,EAAAL,KAAQM,2EA7BNgB,EAAAtB,KAAQC,MAAK,KAEZD,EAAW,IAAAuB,EAAAvB,KAMU,WAArBA,EAAO,GAACwB,UAAqBC,+NAlBvBzB,EAAO,GAACC,MAAOD,EAAU,kBAChCA,EAAO,GAAC0B,MAAQ,yBACdxB,EAAAyB,EAAA,SAAAC,EAAA5B,KAAQwB,+CACWxB,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,YAAU,mBACVE,EAAAyB,EAAA,KAAAE,EAAA7B,KAAQM,cAPdC,EAgCGC,EAAAmB,EAAAlB,GAvBDC,EAsBKiB,EAAAhB,GArBHD,EAEAC,EAAAmB,sEADI,EAAAX,GAAAG,KAAAA,EAAAtB,KAAQC,MAAK,KAAAmB,EAAAW,EAAAT,GAEZtB,EAAW,yDAMU,WAArBA,EAAO,GAACwB,yEAlBFxB,EAAO,GAACC,MAAOD,EAAU,sCAChCA,EAAO,GAAC0B,MAAQ,wCACd,EAAAP,GAAAS,KAAAA,EAAA5B,KAAQwB,8DACWxB,EAAU,GAAG,cAAgB,SAAKA,EAAC,GAC1D,UACA,YAAU,mCACV,EAAAmB,GAAAU,KAAAA,EAAA7B,KAAQM,4FASCP,EAAAC,KAAQC,MAAK,yTAFtBM,EAGKC,EAAAwB,EAAAvB,GAFHC,EAAqEsB,EAAAC,UACrEvB,EAA2BsB,EAAAF,kBAApB,EAAAX,GAAApB,KAAAA,EAAAC,KAAQC,MAAK,KAAAmB,EAAAC,EAAAtB,waAItBQ,EASAC,EAAAI,EAAAH,GAJGC,EAGCE,EAAAsB,uDA7BN,OAAAlC,KAAQmC,WAAQC,8PA/BhBC,EAEApC,EACAqC,WAVOC,GAAgBC,cAChBC,GAAsBD,EAK7BE,GAAa,sIAcQH,EAAkBI,iBACzCD,EAEJ,QADAE,GAAQD,eAAAA,EAAWE,MAAON,EAAQjC,QAAlC,QAAAwC,EAA2CH,eAAAA,EAAWE,eAAtDC,SAAAA,EAA2DxC,QAClDqC,eAAAA,EAAWI,MAAOR,EAAQjC,QAAnC,QAAA0C,EAA4CL,eAAAA,EAAWI,eAAvDC,SAAAA,EAA4D1C,iBAA5DsC,GAAAA,GApBKK,CAAgBV,EAASW,2BAwBJjD,EAAmBsC,GACrCA,EAAQf,SACV2B,EAAA,EAAAd,GAAapC,eAAAA,EAAQ,yBACZ,KAAAA,EAAM,2BACX,2BAEJkD,EAAA,EAAAd,EAAa,IA7Bde,CAAeX,EAAYF,iBAW5Bc,iBACEF,EAAA,EAAAb,GAAcrC,eAAAA,EAAOqD,eAAerD,eAAAA,EAAOsD,cAAY,GACtD,+DAgCkDtD,EAAKuD"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{P as e,i as t,s,Q as
|
|
1
|
+
import{P as e,i as t,s as i,Q as s,K as l,b as a,C as n,D as c,E as o,o as r,ab as m,e as v,d,g as b,R as f,j as u,M as w,J as x,x as p,A as g,l as h,G as k}from"../../index-c33b3772.js";import y from"./sidebar-feature-group.nested.js";import $ from"./sidebar-sub-features.nested.js";import{t as j,i as L}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature.nested.js";import"../../EventHandler-02058705.js";function z(e){s(e,"svelte-vccvmw",".mc-sidebar-section.svelte-vccvmw.svelte-vccvmw{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0px;scrollbar-color:#8f94a3 #5b737d;scrollbar-width:thin}.mc-sidebar-section.svelte-vccvmw ul.svelte-vccvmw,.mc-sidebar-section.svelte-vccvmw li.svelte-vccvmw{list-style-type:none;margin:0;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.mc-sidebar-section.svelte-vccvmw ul.svelte-vccvmw{-webkit-box-align:start;-ms-flex-align:start;align-items:start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar-section.svelte-vccvmw ul li.svelte-vccvmw{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-sizing:border-box;box-sizing:border-box;margin:4px 0px}.mc-sidebar-section.svelte-vccvmw ul li.svelte-vccvmw:first-child{margin-top:0}.mc-sidebar-section.svelte-vccvmw ul li.svelte-vccvmw:last-child{margin-bottom:0}.mc-sidebar-section.svelte-vccvmw ul.is-hidden.svelte-vccvmw{-o-transition:margin-left 300ms ease-in-out;-webkit-transition:margin-left 300ms ease-in-out;transition:margin-left 300ms ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section.svelte-vccvmw ul.is-visible.svelte-vccvmw{-o-transition:margin-left 300ms ease-in-out;-webkit-transition:margin-left 300ms ease-in-out;transition:margin-left 300ms ease-in-out;margin-left:0}.mc-sidebar-section.svelte-vccvmw.svelte-vccvmw::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section.svelte-vccvmw.svelte-vccvmw::-webkit-scrollbar-thumb{background:#009eac}")}function G(e,t,i){const s=e.slice();return s[10]=t[i],s}function E(e){let t,i,s,l,m,p,g=e[0],h=[];for(let t=0;t<g.length;t+=1)h[t]=A(G(e,g,t));const k=e=>c(h[e],1,1,(()=>{h[e]=null}));let y=e[3]&&e[4]&&B(e);return{c(){t=v("div"),i=v("ul");for(let e=0;e<h.length;e+=1)h[e].c();m=d(),y&&y.c(),b(i,"class",s=f(e[3]&&e[4]?"is-hidden":"is-visible")+" svelte-vccvmw"),b(i,"aria-hidden",l=e[3]&&e[4]),b(t,"class","mc-sidebar-section svelte-vccvmw")},m(e,s){a(e,t,s),u(t,i);for(let e=0;e<h.length;e+=1)h[e]&&h[e].m(i,null);u(t,m),y&&y.m(t,null),p=!0},p(e,a){if(103&a){let t;for(g=e[0],t=0;t<g.length;t+=1){const s=G(e,g,t);h[t]?(h[t].p(s,a),n(h[t],1)):(h[t]=A(s),h[t].c(),n(h[t],1),h[t].m(i,null))}for(w(),t=g.length;t<h.length;t+=1)k(t);o()}(!p||24&a&&s!==(s=f(e[3]&&e[4]?"is-hidden":"is-visible")+" svelte-vccvmw"))&&b(i,"class",s),(!p||24&a&&l!==(l=e[3]&&e[4]))&&b(i,"aria-hidden",l),e[3]&&e[4]?y?(y.p(e,a),24&a&&n(y,1)):(y=B(e),y.c(),n(y,1),y.m(t,null)):y&&(w(),c(y,1,1,(()=>{y=null})),o())},i(e){if(!p){for(let e=0;e<g.length;e+=1)n(h[e]);n(y),p=!0}},o(e){h=h.filter(Boolean);for(let e=0;e<h.length;e+=1)c(h[e]);c(y),p=!1},d(e){e&&r(t),x(h,e),y&&y.d()}}}function A(e){let t,i,s,l,o,m;function f(){return e[8](e[10])}return i=new y({props:{featureGroup:e[10],expand:e[2]===e[10].code,a11yLabels:e[1]}}),i.$on("feature-click",e[7]),{c(){t=v("li"),p(i.$$.fragment),s=d(),b(t,"class","svelte-vccvmw")},m(e,n){a(e,t,n),g(i,t,null),u(t,s),l=!0,o||(m=h(t,"click",f),o=!0)},p(t,s){e=t;const l={};1&s&&(l.featureGroup=e[10]),5&s&&(l.expand=e[2]===e[10].code),2&s&&(l.a11yLabels=e[1]),i.$set(l)},i(e){l||(n(i.$$.fragment,e),l=!0)},o(e){c(i.$$.fragment,e),l=!1},d(e){e&&r(t),k(i),o=!1,m()}}}function B(e){let t,i;return t=new $({props:{data:e[3],a11yLabels:e[1]}}),t.$on("back-click",e[9]),{c(){p(t.$$.fragment)},m(e,s){g(t,e,s),i=!0},p(e,i){const s={};8&i&&(s.data=e[3]),2&i&&(s.a11yLabels=e[1]),t.$set(s)},i(e){i||(n(t.$$.fragment,e),i=!0)},o(e){c(t.$$.fragment,e),i=!1},d(e){k(t,e)}}}function C(e){let t,i,s=e[0]?.length&&E(e);return{c(){s&&s.c(),t=l()},m(e,l){s&&s.m(e,l),a(e,t,l),i=!0},p(e,[i]){e[0]?.length?s?(s.p(e,i),1&i&&n(s,1)):(s=E(e),s.c(),n(s,1),s.m(t.parentNode,t)):s&&(w(),c(s,1,1,(()=>{s=null})),o())},i(e){i||(n(s),i=!0)},o(e){c(s),i=!1},d(e){s&&s.d(e),e&&r(t)}}}function D(e,t,i){let s;m(e,L,(e=>i(4,s=e)));let l,a,{data:n=[]}=t,{a11yLabels:c}=t;function o(e){const t=s;t||j(),i(2,l=t&&l===e?void 0:e)}function r(e){(null==e?void 0:e.detail)?a&&a.code===e.detail.code?i(3,a=void 0):i(3,a=e.detail):i(3,a=void 0)}return e.$$set=e=>{"data"in e&&i(0,n=e.data),"a11yLabels"in e&&i(1,c=e.a11yLabels)},[n,c,l,a,s,o,r,e=>r(e),e=>o(e.code),()=>r()]}class H extends e{constructor(e){super(),t(this,e,D,C,i,{data:0,a11yLabels:1},z)}}export{H as default};
|
|
2
2
|
//# sourceMappingURL=sidebar-section.nested.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-section.nested.js","sources":["../../../../src/components/sidebar/sidebar-section.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { A11yLabels, Feature, FeatureGroup } from './sidebar.types';\n import FeatureGroupComponent from './sidebar-feature-group.nested.svelte';\n import SubFeaturesComponent from './sidebar-sub-features.nested.svelte';\n import { isSidebarOpen, toggleSidebar } from './sidebar-service';\n\n export let data: FeatureGroup[] = [];\n export let a11yLabels: A11yLabels;\n\n let expandedGroup: string | undefined;\n let expandedSubGroup: Feature | undefined;\n\n function handleGroupClick(code: string) {\n // opens the menu if at the time of the click on a FeatureGroup this one was closed\n const open = $isSidebarOpen;\n if (!open) {\n toggleSidebar();\n }\n\n if (open && expandedGroup === code) {\n expandedGroup = undefined;\n } else {\n expandedGroup = code;\n }\n }\n\n function handleFeatureClick(event?: CustomEvent<Feature>) {\n if (event?.detail) {\n if (expandedSubGroup && expandedSubGroup.code === event.detail.code) {\n expandedSubGroup = undefined;\n } else {\n expandedSubGroup = event.detail;\n }\n } else {\n expandedSubGroup = undefined;\n }\n }\n</script>\n\n{#if data?.length}\n <div class=\"mc-sidebar-section\">\n <ul\n class={expandedSubGroup && $isSidebarOpen ? 'is-hidden' : 'is-visible'}\n aria-hidden={expandedSubGroup && $isSidebarOpen}\n >\n {#each data as featureGroup}\n <li on:click={() => handleGroupClick(featureGroup.code)}>\n <FeatureGroupComponent\n {featureGroup}\n expand={expandedGroup === featureGroup.code}\n {a11yLabels}\n on:feature-click={(event) => handleFeatureClick(event)}\n />\n </li>\n {/each}\n </ul>\n {#if expandedSubGroup && $isSidebarOpen}\n <SubFeaturesComponent\n data={expandedSubGroup}\n {a11yLabels}\n on:back-click={() => handleFeatureClick()}\n />\n {/if}\n </div>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar-section {\n display: flex;\n flex-direction: row;\n flex: 1;\n align-items: flex-start;\n min-height: 38px;\n overflow-x: hidden;\n overflow-y: auto;\n overflow-y: overlay;\n padding: 1px 0px;\n scrollbar-color: $color-primary-02-400 $color-sidebar-divider-background;\n scrollbar-width: thin;\n\n ul,\n li {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n width: 100%;\n }\n\n ul {\n align-items: start;\n flex-direction: column;\n justify-content: center;\n\n li {\n flex-direction: column;\n box-sizing: border-box;\n margin: 4px 0px;\n\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n &.is-hidden {\n @include transition(margin-left 300ms ease-in-out);\n margin-left: -320px;\n opacity: 0;\n }\n\n &.is-visible {\n @include transition(margin-left 300ms ease-in-out);\n margin-left: 0;\n }\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n height: 10px;\n background: $color-sidebar-
|
|
1
|
+
{"version":3,"file":"sidebar-section.nested.js","sources":["../../../../src/components/sidebar/sidebar-section.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { A11yLabels, Feature, FeatureGroup } from './sidebar.types';\n import FeatureGroupComponent from './sidebar-feature-group.nested.svelte';\n import SubFeaturesComponent from './sidebar-sub-features.nested.svelte';\n import { isSidebarOpen, toggleSidebar } from './sidebar-service';\n\n export let data: FeatureGroup[] = [];\n export let a11yLabels: A11yLabels;\n\n let expandedGroup: string | undefined;\n let expandedSubGroup: Feature | undefined;\n\n function handleGroupClick(code: string) {\n // opens the menu if at the time of the click on a FeatureGroup this one was closed\n const open = $isSidebarOpen;\n if (!open) {\n toggleSidebar();\n }\n\n if (open && expandedGroup === code) {\n expandedGroup = undefined;\n } else {\n expandedGroup = code;\n }\n }\n\n function handleFeatureClick(event?: CustomEvent<Feature>) {\n if (event?.detail) {\n if (expandedSubGroup && expandedSubGroup.code === event.detail.code) {\n expandedSubGroup = undefined;\n } else {\n expandedSubGroup = event.detail;\n }\n } else {\n expandedSubGroup = undefined;\n }\n }\n</script>\n\n{#if data?.length}\n <div class=\"mc-sidebar-section\">\n <ul\n class={expandedSubGroup && $isSidebarOpen ? 'is-hidden' : 'is-visible'}\n aria-hidden={expandedSubGroup && $isSidebarOpen}\n >\n {#each data as featureGroup}\n <li on:click={() => handleGroupClick(featureGroup.code)}>\n <FeatureGroupComponent\n {featureGroup}\n expand={expandedGroup === featureGroup.code}\n {a11yLabels}\n on:feature-click={(event) => handleFeatureClick(event)}\n />\n </li>\n {/each}\n </ul>\n {#if expandedSubGroup && $isSidebarOpen}\n <SubFeaturesComponent\n data={expandedSubGroup}\n {a11yLabels}\n on:back-click={() => handleFeatureClick()}\n />\n {/if}\n </div>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar-section {\n display: flex;\n flex-direction: row;\n flex: 1;\n align-items: flex-start;\n min-height: 38px;\n overflow-x: hidden;\n overflow-y: auto;\n overflow-y: overlay;\n padding: 1px 0px;\n scrollbar-color: $color-primary-02-400 $color-sidebar-divider-background;\n scrollbar-width: thin;\n\n ul,\n li {\n list-style-type: none;\n margin: 0;\n padding: 0;\n display: flex;\n width: 100%;\n }\n\n ul {\n align-items: start;\n flex-direction: column;\n justify-content: center;\n\n li {\n flex-direction: column;\n box-sizing: border-box;\n margin: 4px 0px;\n\n &:first-child {\n margin-top: 0;\n }\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n &.is-hidden {\n @include transition(margin-left 300ms ease-in-out);\n margin-left: -320px;\n opacity: 0;\n }\n\n &.is-visible {\n @include transition(margin-left 300ms ease-in-out);\n margin-left: 0;\n }\n }\n\n &::-webkit-scrollbar {\n width: 5px;\n height: 10px;\n background: $color-sidebar-scroll-background;\n\n &-thumb {\n background: $color-sidebar-scroll-color;\n }\n }\n }\n</style>\n"],"names":["ctx","length","i","if_block","create_if_block_1","attr","ul","ul_class_value","null_to_empty","ul_aria_hidden_value","insert","target","div","anchor","append","each_blocks","current","dirty","code","li","create_if_block","expandedGroup","expandedSubGroup","data","$$props","a11yLabels","handleGroupClick","open","$isSidebarOpen","toggleSidebar","$$invalidate","undefined","handleFeatureClick","event","detail","featureGroup"],"mappings":"w8EA+CaA,EAAI,wBAATC,OAAIC,GAAA,4DAWH,IAAAC,EAAAH,MAAoBA,EAAc,IAAAI,EAAAJ,uFAd9BK,EAAAC,EAAA,QAAAC,EAAAC,EAAAR,MAAoBA,EAAc,GAAG,YAAc,cAAY,kBACzDK,EAAAC,EAAA,cAAAG,EAAAT,MAAoBA,EAAc,4DAHnDU,EAuBKC,EAAAC,EAAAC,GAtBHC,EAcIF,EAAAN,6GAVKN,EAAI,WAATC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAa,EAAAd,OAAAC,GAAA,aAHCc,GAAA,GAAAC,GAAAV,KAAAA,EAAAC,EAAAR,MAAoBA,EAAc,GAAG,YAAc,cAAY,qCACzDgB,GAAA,GAAAC,GAAAR,KAAAA,EAAAT,MAAoBA,EAAc,2BAa5CA,MAAoBA,EAAc,iIAXnCC,OAAIC,GAAA,4OAIQF,EAAa,KAAKA,EAAY,IAACkB,+HAH3CR,EAOIC,EAAAQ,EAAAN,wHAJQb,EAAa,KAAKA,EAAY,IAACkB,0LASrClB,EAAgB,2HAAhBA,EAAgB,6IAnBzBG,EAAAH,MAAMC,QAAMmB,EAAApB,yEAAZA,MAAMC,+NA9BLoB,EACAC,QAJOC,EAAI,IAAAC,cACJC,GAAsBD,EAKxB,SAAAE,EAAiBR,GAElB,MAAAS,EAAOC,EACRD,GACHE,IAIAC,EAAA,EAAAT,EADEM,GAAQN,IAAkBH,OACZa,EAEAb,GAIX,SAAAc,EAAmBC,IACtBA,eAAAA,EAAOC,QACLZ,GAAoBA,EAAiBJ,OAASe,EAAMC,OAAOhB,KAC7DY,EAAA,EAAAR,OAAmBS,OAEnBT,EAAmBW,EAAMC,QAG3BJ,EAAA,EAAAR,OAAmBS,sGAiBME,GAAUD,EAAmBC,MALhCP,EAAiBS,EAAajB,UAc7Bc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{P as e,i as s,s as
|
|
1
|
+
import{P as e,i as s,s as t,Q as i,K as l,b as n,n as a,o,ab as c,e as r,d,t as m,g as x,j as b,l as g,k as v,Z as p}from"../../index-c33b3772.js";import{a as f,s as u,i as _}from"../../sidebar-service-275bf9ef.js";function h(e){i(e,"svelte-x5l57s",".mc-sidebar-segment.svelte-x5l57s.svelte-x5l57s{cursor:pointer;-webkit-box-flex:0;-ms-flex:0;flex:0;text-decoration:none;color:#ffffff;line-height:22px;display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;min-height:40px}.mc-sidebar-segment__icon.svelte-x5l57s.svelte-x5l57s{fill:#ffffff}.mc-sidebar-segment.svelte-x5l57s span.svelte-x5l57s{width:200px;min-width:200px}.mc-sidebar-segment__container.svelte-x5l57s.svelte-x5l57s{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:8px 0px}.mc-sidebar-segment__text.svelte-x5l57s.svelte-x5l57s{margin-left:10px}.mc-sidebar-segment.is-selected.svelte-x5l57s.svelte-x5l57s{background:#5b737d}.mc-sidebar-segment.svelte-x5l57s .svelte-x5l57s:last-child{margin-left:10px}.mc-sidebar-segment.svelte-x5l57s.svelte-x5l57s:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar-segment.svelte-x5l57s:focus-visible .mc-sidebar-segment__container.svelte-x5l57s{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment.svelte-x5l57s.svelte-x5l57s:hover{background:#405d68}.mc-sidebar-segment.is-close.svelte-x5l57s .mc-sidebar-segment__container.svelte-x5l57s{-o-transition:margin 300ms ease-in-out;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close.svelte-x5l57s .mc-sidebar-segment__text.svelte-x5l57s{opacity:0}.mc-sidebar-segment.is-open.svelte-x5l57s .mc-sidebar-segment__container.svelte-x5l57s{-o-transition:margin 300ms ease-in-out;-webkit-transition:margin 300ms ease-in-out;transition:margin 300ms ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open.svelte-x5l57s .mc-sidebar-segment__text.svelte-x5l57s{opacity:1}")}function w(e){let s,t,i,l,a,c,p,f,u,_,h,w,y=e[0].label+"",$=e[0].icon&&k(e);return{c(){s=r("a"),t=r("div"),$&&$.c(),i=d(),l=r("span"),a=m(y),x(l,"aria-hidden",c=!e[2]),x(l,"class","mc-sidebar-segment__text svelte-x5l57s"),x(t,"class","mc-sidebar-segment__container mc-sidebar-segment__icon svelte-x5l57s"),x(s,"aria-label",p=e[0].label),x(s,"class",f="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-x5l57s"),x(s,"href",u=e[0].href??"javascript:void(null)"),x(s,"id",_=e[0].code)},m(o,c){n(o,s,c),b(s,t),$&&$.m(t,null),b(t,i),b(t,l),b(l,a),h||(w=g(s,"click",e[3]),h=!0)},p(e,n){e[0].icon?$?$.p(e,n):($=k(e),$.c(),$.m(t,i)):$&&($.d(1),$=null),1&n&&y!==(y=e[0].label+"")&&v(a,y),4&n&&c!==(c=!e[2])&&x(l,"aria-hidden",c),1&n&&p!==(p=e[0].label)&&x(s,"aria-label",p),7&n&&f!==(f="mc-sidebar-segment "+(e[0].code===e[1]?.lv0?.code?"is-selected":"")+" "+(e[2]?"is-open":"is-close")+" svelte-x5l57s")&&x(s,"class",f),1&n&&u!==(u=e[0].href??"javascript:void(null)")&&x(s,"href",u),1&n&&_!==(_=e[0].code)&&x(s,"id",_)},d(e){e&&o(s),$&&$.d(),h=!1,w()}}}function k(e){let s,t,i=`<${j(e[0].icon)} class="mc-sidebar-segment__icon" style="${$}" />`;return{c(){s=new p(!1),t=l(),s.a=t},m(e,l){s.m(i,e,l),n(e,t,l)},p(e,t){1&t&&i!==(i=`<${j(e[0].icon)} class="mc-sidebar-segment__icon" style="${$}" />`)&&s.p(i)},d(e){e&&o(t),e&&s.d()}}}function y(e){let s,t=e[0]&&w(e);return{c(){t&&t.c(),s=l()},m(e,i){t&&t.m(e,i),n(e,s,i)},p(e,[i]){e[0]?t?t.p(e,i):(t=w(e),t.c(),t.m(s.parentNode,s)):t&&(t.d(1),t=null)},i:a,o:a,d(e){t&&t.d(e),e&&o(s)}}}const $="width: 24px; height: 24px;";function j(e){return`${e} size="2rem"`}function z(e,s,t){let i,l;c(e,u,(e=>t(1,i=e))),c(e,_,(e=>t(2,l=e)));let{data:n}=s;return e.$$set=e=>{"data"in e&&t(0,n=e.data)},[n,i,l,function(){f(n.code)}]}class K extends e{constructor(e){super(),s(this,e,z,y,t,{data:0},h)}}export{K as default};
|
|
2
2
|
//# sourceMappingURL=sidebar-segment.nested.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-segment.nested.js","sources":["../../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from './sidebar-service';\n\n export let data: Segment;\n\n const mediumIconStyle
|
|
1
|
+
{"version":3,"file":"sidebar-segment.nested.js","sources":["../../../../src/components/sidebar/sidebar-segment.nested.svelte"],"sourcesContent":["<svelte:options />\n\n<script lang=\"ts\">\n import type { Segment } from './sidebar.types';\n import {\n isSidebarOpen,\n selectedFeature,\n selectFeature,\n } from './sidebar-service';\n\n export let data: Segment;\n\n const mediumIconStyle = 'width: 24px; height: 24px;';\n\n function generateIcon(iconname: string): string {\n return `${iconname} size=\"2rem\"`;\n }\n\n function handleClick() {\n selectFeature(data.code);\n }\n</script>\n\n{#if data}\n <a\n aria-label={data.label}\n class=\"mc-sidebar-segment {data.code === $selectedFeature?.lv0?.code\n ? 'is-selected'\n : ''} {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n href={data.href ?? 'javascript:void(null)'}\n id={data.code}\n on:click={handleClick}\n >\n <div class=\"mc-sidebar-segment__container mc-sidebar-segment__icon\">\n {#if data.icon}\n {@html `<${generateIcon(\n data.icon,\n )} class=\"mc-sidebar-segment__icon\" style=\"${mediumIconStyle}\" />`}\n {/if}\n <span aria-hidden={!$isSidebarOpen} class=\"mc-sidebar-segment__text\">\n {data.label}\n </span>\n </div>\n </a>\n{/if}\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './sidebar-variables';\n\n .mc-sidebar-segment {\n cursor: pointer;\n flex: 0;\n text-decoration: none;\n color: $color-sidebar-text-color;\n line-height: 22px;\n display: flex;\n overflow: hidden;\n min-height: 40px;\n\n &__icon {\n fill: $color-sidebar-icon;\n }\n\n span {\n width: 200px;\n min-width: 200px;\n }\n\n &__container {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 8px 0px;\n }\n\n svg {\n fill: $color-sidebar-icon;\n }\n\n &__text {\n margin-left: 10px;\n }\n\n &.is-selected {\n background: $color-sidebar-feature-selected-background;\n }\n\n :last-child {\n margin-left: 10px;\n }\n\n &:focus-visible {\n box-shadow: none;\n border: none;\n outline: none;\n\n .mc-sidebar-segment__container {\n box-shadow: none;\n border: none;\n border-radius: 6px;\n outline: 1px solid #0b96cc;\n }\n }\n\n &:hover {\n background: $color-sidebar-feature-hover-background;\n }\n\n &.is-close {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 20px;\n width: 24px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 0;\n }\n }\n\n &.is-open {\n .mc-sidebar-segment__container {\n @include transition(margin 300ms ease-in-out);\n margin: 0 32px;\n }\n\n .mc-sidebar-segment__text {\n opacity: 1;\n }\n }\n }\n</style>\n"],"names":["t1_value","ctx","label","if_block","icon","create_if_block_1","attr","a","a_aria_label_value","a_class_value","code","lv0","href","a_id_value","insert","target","anchor","append","div","span","dirty","set_data","t1","raw_value","generateIcon","mediumIconStyle","html_tag","p","create_if_block","iconname","data","$$props","selectFeature"],"mappings":"0lEAwCSA,EAAAC,KAAKC,MAAK,GANRC,EAAAF,KAAKG,MAAIC,EAAAJ,yFAKMA,EAAc,8IAdxBK,EAAAC,EAAA,aAAAC,EAAAP,KAAKC,OACUI,EAAAC,EAAA,QAAAE,EAAA,uBAAAR,KAAKS,OAAST,EAAkB,IAAAU,KAAKD,KAC5D,cACA,IAAK,KAAAT,EAAiB,GAAA,UAAY,YAAU,+BAC1CA,EAAI,GAACW,MAAQ,yBACfN,EAAAC,EAAA,KAAAM,EAAAZ,KAAKS,cANXI,EAmBGC,EAAAR,EAAAS,GAVDC,EASKV,EAAAW,yBAHHD,EAEMC,EAAAC,4BAVElB,EAAW,kBAGdA,KAAKG,2DAMP,EAAAgB,GAAApB,KAAAA,EAAAC,KAAKC,MAAK,KAAAmB,EAAAC,EAAAtB,gBADOC,EAAc,0BAdxB,EAAAmB,GAAAZ,KAAAA,EAAAP,KAAKC,4BACU,EAAAkB,GAAAX,KAAAA,EAAA,uBAAAR,KAAKS,OAAST,EAAkB,IAAAU,KAAKD,KAC5D,cACA,IAAK,KAAAT,EAAiB,GAAA,UAAY,YAAU,8CAC1CA,EAAI,GAACW,MAAQ,wCACf,EAAAQ,GAAAP,KAAAA,EAAAZ,KAAKS,2EAKMa,EAAA,IAAAC,EACTvB,EAAK,GAAAG,iDACsCqB,+EAFlC,EAAAL,GAAAG,KAAAA,EAAA,IAAAC,EACTvB,EAAK,GAAAG,iDACsCqB,UAAeC,EAAAC,EAAAJ,kDAd/DtB,EAAI,IAAA2B,EAAA3B,oEAAJA,EAAI,sGAXD,MAAAwB,EAAkB,6BAEf,SAAAD,EAAaK,YACVA,6FALDC,GAAaC,kEAStBC,EAAcF,EAAKpB"}
|
|
@@ -125,10 +125,10 @@
|
|
|
125
125
|
&::-webkit-scrollbar {
|
|
126
126
|
width: 5px;
|
|
127
127
|
height: 10px;
|
|
128
|
-
background: $color-sidebar-
|
|
128
|
+
background: $color-sidebar-scroll-background;
|
|
129
129
|
|
|
130
130
|
&-thumb {
|
|
131
|
-
background: $color-
|
|
131
|
+
background: $color-sidebar-scroll-color;
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
134
|
}
|
|
@@ -10,8 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
export let data: Segment;
|
|
12
12
|
|
|
13
|
-
const mediumIconStyle =
|
|
14
|
-
'width: 24px; height: 24px; fill: ${$color-sidebar-icon};';
|
|
13
|
+
const mediumIconStyle = 'width: 24px; height: 24px;';
|
|
15
14
|
|
|
16
15
|
function generateIcon(iconname: string): string {
|
|
17
16
|
return `${iconname} size="2rem"`;
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
id={data.code}
|
|
33
32
|
on:click={handleClick}
|
|
34
33
|
>
|
|
35
|
-
<div class="mc-sidebar-segment__container">
|
|
34
|
+
<div class="mc-sidebar-segment__container mc-sidebar-segment__icon">
|
|
36
35
|
{#if data.icon}
|
|
37
36
|
{@html `<${generateIcon(
|
|
38
37
|
data.icon,
|
|
@@ -59,6 +58,10 @@
|
|
|
59
58
|
overflow: hidden;
|
|
60
59
|
min-height: 40px;
|
|
61
60
|
|
|
61
|
+
&__icon {
|
|
62
|
+
fill: $color-sidebar-icon;
|
|
63
|
+
}
|
|
64
|
+
|
|
62
65
|
span {
|
|
63
66
|
width: 200px;
|
|
64
67
|
min-width: 200px;
|