@mozaic-ds/web-components 1.5.1 → 1.7.0

package/dist/components/sidebarshortcuts/SidebarShortcuts.svelte

@@ -0,0 +1,583 @@
+<svelte:options
+  customElement={{
+    tag: 'm-sidebar-shortcuts',
+    props: {
+      stacked: { reflect: true, type: 'Boolean', attribute: 'stacked' },
+    },
+  }}
+/>
+
+<script lang="ts">
+  import { ViewGridX424 } from '@mozaic-ds/icons-svelte';
+  import { useFloatingItem } from '../sidebar/floating-item.svelte';
+  import { getSidebarState } from '../sidebar/sidebar-state.svelte';
+
+  /**
+   * SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.
+   */
+
+  interface Props {
+    /**
+     * Identifier used for listbox controlling.
+     */
+    id?: string;
+    /**
+     * Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout.
+     * @slot default - Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components.
+     */
+    stacked?: boolean;
+  }
+
+  let { id = crypto.randomUUID(), stacked }: Props = $props();
+
+  let element: HTMLElement | null = $state(null);
+
+  $effect(() => {
+    const el = expanded ? element : trigger;
+
+    el?.dispatchEvent(
+      new CustomEvent('update:stacked', {
+        detail: stacked,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  });
+
+  let trigger: HTMLElement | null = $state(null);
+  let listbox: HTMLElement | null = $state(null);
+
+  const {
+    floatingItemIsDisplayed,
+    hideFloatingItem,
+    showFloatingItem,
+    onTriggerKeydown,
+    onListboxKeydown,
+  } = useFloatingItem(
+    () => trigger,
+    () => listbox,
+  );
+
+  let expanded = $state(false);
+</script>
+
+{#if expanded}
+  <section
+    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
+    bind:this={element}
+  >
+    <nav aria-label="shortcut items">
+      <ul
+        class={{
+          'mc-sidebar__shortcut-list': true,
+          'mc-sidebar__shortcut-list--stacked': stacked,
+          'mc-sidebar__shortcut-list--grid': !stacked,
+        }}
+        role="menu"
+      >
+        <slot />
+      </ul>
+    </nav>
+  </section>
+{:else}
+  <div
+    {@attach getSidebarState({ setExpanded: (value) => (expanded = value) })}
+    class="mc-sidebar__shortcut-wrapper"
+  >
+    <button
+      bind:this={trigger}
+      id={`trigger-${id}`}
+      class="mc-sidebar__shortcut-item mc-sidebar__trigger"
+      aria-label="Sidebar shortcuts"
+      aria-haspopup="menu"
+      aria-expanded={floatingItemIsDisplayed}
+      aria-controls={`listbox-${id}`}
+      onmouseenter={showFloatingItem}
+      onfocus={showFloatingItem}
+      onkeydown={onTriggerKeydown}
+      onmouseleave={hideFloatingItem}
+      onblur={hideFloatingItem}
+    >
+      <ViewGridX424 />
+    </button>
+
+    <div
+      bind:this={listbox}
+      id={`listbox-${id}`}
+      tabindex="0"
+      role="menu"
+      class="mc-sidebar__floating-item mc-sidebar__floating-item--hidden"
+      onkeydown={onListboxKeydown}
+      onmouseleave={hideFloatingItem}
+      onblur={hideFloatingItem}
+    >
+      <div class="mc-sidebar__listbox">
+        <ul
+          class="mc-sidebar__shortcut-list mc-sidebar__shortcut-list--floating mc-sidebar__shortcut-list mc-sidebar__shortcut-list--stacked"
+        >
+          <slot />
+        </ul>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>/**
+ * Do not edit directly, this file was auto-generated.
+ */
+.mc-sidebar {
+  display: flex;
+  align-items: start;
+  font-size: var(--font-size-100, 0.875rem);
+  color: var(--sidebar-color-text-default, #404040);
+  box-sizing: border-box;
+  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
+  padding-right: 4rem;
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar {
+    display: inline-flex;
+    padding-right: 0;
+  }
+}
+.mc-sidebar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-height: 100vh;
+  width: 100%;
+  padding: 0.75rem;
+  background-color: var(--sidebar-color-background-primary, #ffffff);
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__wrapper {
+    width: 17.25rem;
+  }
+}
+.mc-sidebar__close-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__close-button {
+    display: none;
+  }
+}
+.mc-sidebar__container {
+  flex-grow: 1;
+}
+.mc-sidebar__floating-item {
+  position: absolute;
+  padding-left: 1.25rem;
+  left: 3rem;
+}
+.mc-sidebar__floating-item--tooltip {
+  top: 0.25rem;
+}
+.mc-sidebar__floating-item--expanded {
+  left: 0;
+  padding: 0;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__floating-item--expanded {
+    left: 18.5rem;
+  }
+}
+.mc-sidebar__floating-item--hidden {
+  visibility: hidden;
+  overflow: hidden;
+  opacity: 0;
+  height: 0;
+  pointer-events: none;
+}
+.mc-sidebar--expanded .mc-sidebar__menu {
+  padding: 0 0.25rem;
+}
+.mc-sidebar--collapsed {
+  width: 4rem;
+}
+.mc-sidebar--collapsed .mc-sidebar__menu {
+  padding: 0;
+}
+
+.mc-sidebar__footer-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.mc-sidebar__footer-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--border-radius-full, 100%);
+}
+.mc-sidebar__footer-profile {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 2.5rem;
+  flex-grow: 1;
+  border-radius: var(--border-radius-s, 0.25rem);
+  background-color: var(--sidebar-color-extra-feature-background-default, rgba(255, 255, 255, 0.01));
+  cursor: pointer;
+  border: none;
+}
+.mc-sidebar__footer-profile:hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer-title {
+  margin: 0;
+  text-align: left;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  font-weight: var(--font-weight-bold, 700);
+}
+.mc-sidebar__footer-subtitle {
+  margin: 0;
+  font-size: var(--font-caption, 0.75rem);
+  color: var(--sidebar-color-job-title, #666666);
+}
+.mc-sidebar__footer-expand {
+  display: none;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: none;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand {
+    display: inline-flex;
+  }
+}
+.mc-sidebar__footer-expand--mobile {
+  position: relative;
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-expand--mobile {
+    display: none;
+  }
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-container {
+  flex-direction: row;
+  justify-content: flex-end;
+  height: 3.5rem;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-content {
+  display: block;
+}
+.mc-sidebar__footer--expanded .mc-sidebar__footer-expand {
+  transform: rotate(180deg);
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-container {
+  flex-direction: column;
+  justify-content: flex-start;
+  height: auto;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-content {
+  display: none;
+}
+.mc-sidebar__footer--collapsed .mc-sidebar__footer-expand {
+  transform: none;
+}
+.mc-sidebar__footer-menu {
+  width: 19.75rem;
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--listbox-color-background, #ffffff);
+  border: 1px solid var(--listbox-color-border, #cccccc);
+  border-radius: var(--border-radius-m, 0.5rem);
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+@media screen and (min-width: 680px) {
+  .mc-sidebar__footer-menu {
+    width: 18.75rem;
+  }
+}
+.mc-sidebar__footer-menu .mc-sidebar__footer-menu-divider {
+  margin: 0.5rem 0.75rem;
+}
+
+.mc-sidebar__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.mc-sidebar__header-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__header-title {
+  font-size: var(--font-size-200, 1.125rem);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--sidebar-color-product-name, #000000);
+  margin: 0;
+  flex-grow: 1;
+  display: none;
+}
+.mc-sidebar__header--expanded .mc-sidebar__header-title {
+  display: block;
+}
+.mc-sidebar__header--collapsed .mc-sidebar__header-title {
+  display: none;
+}
+
+.mc-sidebar__listbox {
+  min-width: 18.75rem;
+  border-radius: var(--border-radius-m, 0.5rem);
+  background-color: var(--listbox-color-background, #ffffff);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  box-shadow: var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0, 0, 0, var(--shadow-bottom-s-opacity, 20%));
+}
+.mc-sidebar__listbox-title {
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  padding-bottom: 0.75rem;
+  margin: 0;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+}
+
+.mc-sidebar__list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 2.5rem;
+  width: 100%;
+  padding-left: 0.25rem;
+  text-align: left;
+  text-decoration: none;
+  font-size: var(--font-size-150, 1rem);
+  font-weight: var(--font-weight-semi-bold, 600);
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__link--locked {
+  pointer-events: none;
+}
+.mc-sidebar__link:not(.mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__link-expand:open .mc-sidebar__sub {
+  transform: rotate(180deg);
+}
+.mc-sidebar__link:is(summary) .mc-sidebar__text {
+  flex-grow: 1;
+}
+
+.mc-sidebar__icon {
+  fill: currentcolor;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.mc-sidebar__indicator {
+  fill: currentcolor;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__text {
+  display: block;
+}
+
+.mc-sidebar__sub {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mc-sidebar__sublist {
+  list-style-type: none;
+  margin: 0;
+  padding: 0 0 0 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.mc-sidebar__item {
+  position: relative;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 0.25rem;
+  padding-left: 0.5rem;
+  margin-bottom: 0.125rem;
+  height: 2rem;
+  text-decoration: none;
+  color: var(--sidebar-color-section-item-text-default, #404040);
+  border-radius: var(--border-radius-m, 0.5rem);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link .mc-sidebar__text {
+  display: block;
+  font-size: var(--font-body-s, 0.875rem);
+  font-weight: var(--font-weight-regular, 400);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected {
+  color: var(--sidebar-color-section-item-text-selected, #006902);
+  background: var(--sidebar-color-section-item-background-selected, #ebf5de);
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:not(.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link--selected):hover {
+  background: var(--sidebar-color-section-item-background-hover, rgba(0, 0, 0, 0.05));
+}
+.mc-sidebar__item--sub.mc-sidebar__item .mc-sidebar__link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__text, .mc-sidebar__item--collapsed .mc-sidebar__sub, .mc-sidebar__item--collapsed .mc-sidebar__sublist {
+  display: none;
+}
+.mc-sidebar__item--collapsed .mc-sidebar__link {
+  padding-left: 0;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-wrapper {
+  width: 100%;
+  display: grid;
+  justify-content: center;
+  position: relative;
+}
+
+.mc-sidebar__shortcut-list {
+  display: flex;
+  margin: 0;
+}
+.mc-sidebar__shortcut-list--grid {
+  padding: 0;
+  gap: 0.5rem;
+  align-items: center;
+}
+.mc-sidebar__shortcut-list--stacked {
+  gap: 0.25rem;
+  flex-direction: column;
+  padding: 0;
+}
+.mc-sidebar__shortcut-list--stacked:not(.mc-sidebar__shortcut-list--floating) {
+  padding: 0 0 0.5rem 1rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--divider-color-primary, #cccccc);
+}
+
+.mc-sidebar__shortcut-item {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  list-style: none;
+  border-radius: var(--border-radius-m, 0.5rem);
+  overflow: hidden;
+}
+.mc-sidebar__shortcut-item:hover {
+  background-color: var(--sidebar-color-shortcut-item-background-hover, rgba(70, 78, 99, 0.2));
+}
+.mc-sidebar__shortcut-item:nth-child(n+5) {
+  display: none;
+}
+.mc-sidebar__shortcut-item--grid {
+  justify-content: center;
+  padding: 0 0.125rem;
+  height: 3rem;
+  width: 3.9375rem;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item--grid .mc-sidebar__shortcut-link {
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.mc-sidebar__shortcut-item--stacked {
+  padding: 0.125rem 0.25rem;
+  width: 12.5rem;
+  height: 2.5rem;
+}
+.mc-sidebar__shortcut-item--stacked.mc-sidebar__shortcut-item--floating {
+  width: 100%;
+  padding: 0.125rem 0 0.125rem 0.25rem;
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-label {
+  font-weight: var(--font-weight-semi-bold, 600);
+  font-size: var(--font-body-m, 1rem);
+}
+.mc-sidebar__shortcut-item--stacked .mc-sidebar__shortcut-link {
+  gap: 0.25rem;
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item {
+  background-color: var(--sidebar-color-shortcut-item-background-selected, #ebf5de);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-label {
+  color: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item--selected.mc-sidebar__shortcut-item .mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-selected, #006902);
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger) {
+  width: 3rem;
+  height: 3rem;
+  justify-content: center;
+  border: none;
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+.mc-sidebar__shortcut-item:is(.mc-sidebar__trigger):hover {
+  background-color: var(--sidebar-color-shortcut-item-background-default, rgba(70, 78, 99, 0.1));
+}
+
+.mc-sidebar__shortcut-link:focus-visible {
+  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
+  outline: 0.125rem solid transparent;
+  outline-offset: 0.125rem;
+}
+.mc-sidebar__shortcut-link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mc-sidebar__shortcut-label {
+  font-size: var(--font-size-25, 0.625rem);
+  font-weight: var(--font-weight-regular, 400);
+  line-height: var(--line-height-s, 1.3);
+  color: var(--sidebar-color-shortcut-item-text-default, #404040);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.mc-sidebar__shortcut-icon {
+  fill: var(--sidebar-color-shortcut-item-text-default, #404040);
+  width: 1.5rem;
+  height: 1.5rem;
+}</style>

package/dist/components/sidebarshortcuts/SidebarShortcuts.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+ * SidebarShortcuts is a component that displays a list of sidebar shortcut items. It supports stacked or grid layouts, shows a floating overlay when the sidebar is collapsed, and allows custom shortcut items via slots.
+ */
+interface Props {
+    /**
+     * Identifier used for listbox controlling.
+     */
+    id?: string;
+    /**
+     * Determines the layout of the sidebar shortcuts. When true, the shortcuts are displayed in a vertical stacked list. When false or not provided, the shortcuts are arranged in a grid layout.
+     * @slot default - Slot for sidebar shortcut items. Should contain one or more `MSidebarShortcutItem` components.
+     */
+    stacked?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const SidebarShortcuts: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type SidebarShortcuts = InstanceType<typeof SidebarShortcuts>;
+export default SidebarShortcuts;
+//# sourceMappingURL=SidebarShortcuts.svelte.d.ts.map

package/dist/components/sidebarshortcuts/SidebarShortcuts.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarShortcuts.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sidebarshortcuts/SidebarShortcuts.svelte.ts"],"names":[],"mappings":"AAQE;;GAEG;AAEH,UAAU,KAAK;IACb;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA+EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,gBAAgB;;;;;;UAAqF,CAAC;AAC1F,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/components/starrating/StarRating.js

@@ -1,4 +1,4 @@
-import{c as W,p as X,a as Y,b as s,x as Z,y as M,f as y,g as $,j as i,n as t,r as A,s as ee,d as R,t as te,e as ae,v,h as j,q as C,u as re}from"../../custom-element.js";import{i as ne}from"../../if.js";import{e as se}from"../../each.js";import{c as ie}from"../../svelte-component.js";import{e as oe}from"../../svelte-element.js";import{a as V}from"../../attributes.js";import{c as le}from"../../custom-element-forward-events.js";import{S as ce,j as ve,k as me}from"../../Condition20.js";import"../../branches.js";var fe=j("<span><!></span>"),ge=j('<span class="mc-star-rating__info svelte-17npafv"> </span>'),pe=j("<div></div> <!>",1);const de={hash:"svelte-17npafv",code:`/**
+import{c as W,e as X,a as Y,p as s,y as Z,x as R,i as t,s as $,b as y,t as ee,d as te,w as v,f as B,m as i,q as C,v as ae,h as D,r as A,k as re}from"../../custom-element.js";import{i as ne}from"../../if.js";import{e as se}from"../../each.js";import{c as ie}from"../../svelte-component.js";import{e as oe}from"../../svelte-element.js";import{a as V}from"../../attributes.js";import{c as le}from"../../custom-element-forward-events.js";import{S as ce,k as ve,l as me}from"../../Condition20.js";import"../../branches.js";var fe=B("<span><!></span>"),ge=B('<span class="mc-star-rating__info svelte-17npafv"> </span>'),pe=B("<div></div> <!>",1);const de={hash:"svelte-17npafv",code:`/**
  * Do not edit directly, this file was auto-generated.
- */.mc-star-rating.svelte-17npafv {display:inline-flex;align-items:center;gap:0.5rem;}.mc-star-rating--standard.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {fill:var(--star-rating-color-icon-standard, #000000);}.mc-star-rating--accent.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {fill:var(--star-rating-color-icon-accent, #ea7315);}.mc-star-rating--slider.svelte-17npafv {cursor:pointer;}.mc-star-rating--link.svelte-17npafv {text-decoration:none;cursor:pointer;}.mc-star-rating--link.svelte-17npafv:not(:hover) .mc-star-rating__info:where(.svelte-17npafv) {text-decoration:underline;}.mc-star-rating--s.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:1.25rem;height:1.25rem;}.mc-star-rating--s.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-100, 0.875rem);}.mc-star-rating--m.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:1.5rem;height:1.5rem;}.mc-star-rating--m.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-150, 1rem);}.mc-star-rating--l.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:2rem;height:2rem;}.mc-star-rating--l.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-200, 1.125rem);}.mc-star-rating__wrapper.svelte-17npafv {display:flex;align-items:center;}.mc-star-rating__info.svelte-17npafv {font-weight:var(--font-weight-medium, 600);line-height:var(--line-height-s, 1.3);color:var(--star-rating-color-text, #000000);}.mc-star-rating__icon.svelte-17npafv svg {height:100%;width:100%;}`};function ue(B,a){X(a,!0),Y(B,de);let o=s(a,"rating",15),x=s(a,"readonly",7),p=s(a,"size",7,"m"),m=s(a,"compact",7),d=s(a,"appearance",7,"standard"),f=s(a,"text",7),r=s(a,"href",7),b=s(a,"target",7),k=re(null);const D=v(()=>r()?"a":"div"),g=v(()=>[x(),m(),r(),f()].some(Boolean)),F=v(()=>({"mc-star-rating":!0,"mc-star-rating--link":r(),"mc-star-rating--slider":!t(g),[`mc-star-rating--${p()}`]:p(),[`mc-star-rating--${d()}`]:d()})),z=v(()=>t(k)??o()),u=v(()=>m()?1:5);function q(e){return m()||t(z)>=e+1?ce:t(g)&&t(z)>=e+.5?ve:me}function K(e){C(k,e+1)}function E(){C(k,null)}function L(e){o(e+1)}function N(e){const h=e.key;let n=Math.floor(o());if(h==="ArrowRight")n=Math.min(t(u),n+1);else if(h==="ArrowLeft")n=Math.max(1,n-1);else return;o(n),e.preventDefault()}const O=v(()=>t(g)?{tabindex:-1}:{onkeydown:N,onmouseleave:E,onblur:E,tabindex:0,"aria-valuemin":0,"aria-valuemax":t(u),"aria-valuenow":o(),"aria-readonly":!1});var T={get rating(){return o()},set rating(e){o(e),i()},get readonly(){return x()},set readonly(e){x(e),i()},get size(){return p()},set size(e="m"){p(e),i()},get compact(){return m()},set compact(e){m(e),i()},get appearance(){return d()},set appearance(e="standard"){d(e),i()},get text(){return f()},set text(e){f(e),i()},get href(){return r()},set href(e){r(e),i()},get target(){return b()},set target(e){b(e),i()}},H=Z(),G=M(H);return oe(G,()=>t(D),!1,(e,h)=>{V(e,()=>({href:r(),target:b(),class:t(F)}),void 0,void 0,void 0,"svelte-17npafv");var n=pe(),_=M(n);V(_,()=>({class:"mc-star-rating__wrapper",role:t(g)?"img":"slider","aria-label":`Note ${t(z)} sur ${t(u)}`,...t(O)}),void 0,void 0,void 0,"svelte-17npafv"),se(_,20,()=>Array.from({length:t(u)}).keys(),l=>l,(l,c)=>{const S=v(()=>q(c));var w=fe();V(w,()=>({class:"mc-star-rating__icon",...t(g)?{}:{onmousemove:()=>K(c),onclick:()=>L(c)}}),void 0,void 0,void 0,"svelte-17npafv");var P=R(w);ie(P,()=>t(S),(Q,U)=>{U(Q,{})}),A(w),y(l,w)}),A(_);var I=ee(_,2);{var J=l=>{var c=ge(),S=R(c,!0);A(c),te(()=>ae(S,f()||r())),y(l,c)};ne(I,l=>{(f()||r())&&l(J)})}y(h,n)}),y(B,H),$(T)}customElements.define("m-star-rating",W(ue,{readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},compact:{attribute:"compact",reflect:!0,type:"Boolean"},rating:{},size:{},appearance:{},text:{},href:{},target:{}},[],[],!0,le));
+ */.mc-star-rating.svelte-17npafv {display:inline-flex;align-items:center;gap:0.5rem;}.mc-star-rating--standard.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {fill:var(--star-rating-color-icon-standard, #000000);}.mc-star-rating--accent.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {fill:var(--star-rating-color-icon-accent, #ea7315);}.mc-star-rating--slider.svelte-17npafv {cursor:pointer;}.mc-star-rating--link.svelte-17npafv {text-decoration:none;cursor:pointer;}.mc-star-rating--link.svelte-17npafv:not(:hover) .mc-star-rating__info:where(.svelte-17npafv) {text-decoration:underline;}.mc-star-rating--s.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:1.25rem;height:1.25rem;}.mc-star-rating--s.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-100, 0.875rem);}.mc-star-rating--m.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:1.5rem;height:1.5rem;}.mc-star-rating--m.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-150, 1rem);}.mc-star-rating--l.svelte-17npafv .mc-star-rating__icon:where(.svelte-17npafv) {width:2rem;height:2rem;}.mc-star-rating--l.svelte-17npafv .mc-star-rating__info:where(.svelte-17npafv) {font-size:var(--font-size-200, 1.125rem);}.mc-star-rating__wrapper.svelte-17npafv {display:flex;align-items:center;}.mc-star-rating__info.svelte-17npafv {font-weight:var(--font-weight-medium, 600);line-height:var(--line-height-s, 1.3);color:var(--star-rating-color-text, #000000);}.mc-star-rating__icon.svelte-17npafv svg {height:100%;width:100%;}`};function ue(E,a){X(a,!0),Y(E,de);let o=s(a,"rating",15),x=s(a,"readonly",7),p=s(a,"size",7,"m"),m=s(a,"compact",7),d=s(a,"appearance",7,"standard"),f=s(a,"text",7),r=s(a,"href",7),k=s(a,"target",7),b=ae(null);const F=v(()=>r()?"a":"div"),g=v(()=>[x(),m(),r(),f()].some(Boolean)),j=v(()=>({"mc-star-rating":!0,"mc-star-rating--link":r(),"mc-star-rating--slider":!t(g),[`mc-star-rating--${p()}`]:p(),[`mc-star-rating--${d()}`]:d()})),z=v(()=>t(b)??o()),u=v(()=>m()?1:5);function q(e){return m()||t(z)>=e+1?ce:t(g)&&t(z)>=e+.5?ve:me}function K(e){C(b,e+1)}function H(){C(b,null)}function L(e){o(e+1)}function N(e){const h=e.key;let n=Math.floor(o());if(h==="ArrowRight")n=Math.min(t(u),n+1);else if(h==="ArrowLeft")n=Math.max(1,n-1);else return;o(n),e.preventDefault()}const O=v(()=>t(g)?{tabindex:-1}:{onkeydown:N,onmouseleave:H,onblur:H,tabindex:0,"aria-valuemin":0,"aria-valuemax":t(u),"aria-valuenow":o(),"aria-readonly":!1});var T={get rating(){return o()},set rating(e){o(e),i()},get readonly(){return x()},set readonly(e){x(e),i()},get size(){return p()},set size(e="m"){p(e),i()},get compact(){return m()},set compact(e){m(e),i()},get appearance(){return d()},set appearance(e="standard"){d(e),i()},get text(){return f()},set text(e){f(e),i()},get href(){return r()},set href(e){r(e),i()},get target(){return k()},set target(e){k(e),i()}},M=Z(),G=R(M);return oe(G,()=>t(F),!1,(e,h)=>{V(e,()=>({href:r(),target:k(),class:t(j)}),void 0,void 0,void 0,"svelte-17npafv");var n=pe(),_=R(n);V(_,()=>({class:"mc-star-rating__wrapper",role:t(g)?"img":"slider","aria-label":`Note ${t(z)} sur ${t(u)}`,...t(O)}),void 0,void 0,void 0,"svelte-17npafv"),se(_,20,()=>Array.from({length:t(u)}).keys(),l=>l,(l,c)=>{const S=v(()=>q(c));var w=fe();V(w,()=>({class:"mc-star-rating__icon",...t(g)?{}:{onmousemove:()=>K(c),onclick:()=>L(c)}}),void 0,void 0,void 0,"svelte-17npafv");var P=D(w);ie(P,()=>t(S),(Q,U)=>{U(Q,{})}),A(w),y(l,w)}),A(_);var I=$(_,2);{var J=l=>{var c=ge(),S=D(c,!0);A(c),ee(()=>re(S,f()||r())),y(l,c)};ne(I,l=>{(f()||r())&&l(J)})}y(h,n)}),y(E,M),te(T)}customElements.define("m-star-rating",W(ue,{readonly:{attribute:"readonly",reflect:!0,type:"Boolean"},compact:{attribute:"compact",reflect:!0,type:"Boolean"},rating:{},size:{},appearance:{},text:{},href:{},target:{}},[],[],{mode:"open"},le));
 //# sourceMappingURL=StarRating.js.map