@limetech/lime-elements 37.44.2 → 37.45.0

package/dist/collection/components/snackbar/snackbar.css

@@ -1,114 +1,24 @@
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
- */
-/*
- * This file is imported into every component that uses MDC!
- *
- * Anything in this file that generates CSS output on its own,
- * without being explicitly used, will output that CSS in every
- * single component, increasing the size of the production build.
- * Avoid that unless there's very good reason for it!
+/**
+ * @prop --snackbar-top: Snackbar has `position: fixed;` and uses `--snackbar-top`, which defaults to `auto` for its `top` property. See the examples in the documentations for further info.
+ * @prop --snackbar-right: Snackbar has `position: fixed;` and uses `--snackbar-right`, which defaults to `0` for its `right` property. See the examples in the documentations for further info.
+ * @prop --snackbar-bottom: Snackbar has `position: fixed;` and uses `--snackbar-bottom`, which defaults to `0` for its `bottom` property. See the examples in the documentations for further info.
+ * @prop --snackbar-left: Snackbar has `position: fixed;` and uses `--snackbar-left`, which defaults to `0` for its `left` property. See the examples in the documentations for further info.
  */
-:host {
-  --mdc-theme-primary: var(
-      --lime-primary-color,
-      rgb(var(--color-teal-default))
-  );
-  --mdc-theme-secondary: var(
-      --lime-secondary-color,
-      rgb(var(--contrast-1100))
-  );
-  --mdc-theme-on-primary: var(
-      --lime-on-primary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-secondary: var(
-      --lime-on-secondary-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-text-disabled-on-background: var(
-      --lime-text-disabled-on-background-color,
-      rgba(var(--contrast-1700), 0.38)
-  );
-  --mdc-theme-text-primary-on-background: var(
-      --lime-text-primary-on-background-color,
-      rgba(var(--contrast-1700), 0.87)
-  );
-  --mdc-theme-text-secondary-on-background: var(
-      --lime-text-secondary-on-background-color,
-      rgba(var(--contrast-1700), 0.54)
-  );
-  --mdc-theme-error: var(
-      --lime-error-background-color,
-      rgb(var(--color-red-dark))
-  );
-  --lime-error-text-color: rgb(var(--color-red-darker));
-  --mdc-theme-surface: var(
-      --lime-surface-background-color,
-      rgb(var(--contrast-100))
-  );
-  --mdc-theme-on-surface: var(
-      --lime-on-surface-color,
-      rgb(var(--contrast-1500))
-  );
+* {
+  box-sizing: border-box;
 }
 
 .mdc-snackbar {
-  z-index: 8;
-  margin: 8px;
+  top: var(--snackbar-top, auto);
+  right: var(--snackbar-right, 0);
+  bottom: var(--snackbar-bottom, 0);
+  left: var(--snackbar-left, 0);
   display: none;
   position: fixed;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  z-index: 8;
+  padding: 0.75rem;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  pointer-events: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-.mdc-snackbar__surface {
-  background-color: #333333;
-}
-
-.mdc-snackbar__label {
-  color: rgba(255, 255, 255, 0.87);
-}
-
-.mdc-snackbar__surface {
-  min-width: 344px;
-}
-@media (max-width: 480px), (max-width: 344px) {
-  .mdc-snackbar__surface {
-    min-width: 100%;
-  }
-}
-
-.mdc-snackbar__surface {
-  max-width: 672px;
-}
-
-.mdc-snackbar__surface {
-  /* @alternate */
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-}
-
-.mdc-snackbar__surface {
-  border-radius: 4px;
-  /* @alternate */
-  border-radius: var(--mdc-shape-small, 4px);
 }
 
 .mdc-snackbar--opening,
@@ -121,298 +31,73 @@
 .mdc-snackbar--open .mdc-snackbar__actions {
   visibility: visible;
 }
-
-.mdc-snackbar--leading {
-  justify-content: flex-start;
-}
-
-.mdc-snackbar--stacked .mdc-snackbar__label {
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 16px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 8px;
-  padding-bottom: 12px;
-}
-[dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label, .mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 8px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 16px;
-  /*rtl:end:ignore*/
-}
-
-.mdc-snackbar--stacked .mdc-snackbar__surface {
-  flex-direction: column;
-  align-items: flex-start;
-}
-.mdc-snackbar--stacked .mdc-snackbar__actions {
-  align-self: flex-end;
-  margin-bottom: 8px;
+.mdc-snackbar--open .mdc-snackbar__surface {
+  transform: scale(1);
+  opacity: 1;
 }
 
 .mdc-snackbar__surface {
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 8px;
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+  padding: 0.5rem;
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  box-sizing: border-box;
+  gap: 0.25rem;
+  min-height: 3.25rem;
+  min-width: unset;
+  max-width: 42rem;
   transform: scale(0.8);
   opacity: 0;
-}
-.mdc-snackbar__surface::before {
-  position: absolute;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border: 1px solid transparent;
-  border-radius: inherit;
-  content: "";
-  pointer-events: none;
-}
-[dir=rtl] .mdc-snackbar__surface, .mdc-snackbar__surface[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 8px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 0;
-  /*rtl:end:ignore*/
-}
-
-.mdc-snackbar--open .mdc-snackbar__surface {
-  transform: scale(1);
-  opacity: 1;
-  pointer-events: auto;
-  transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
-}
-.mdc-snackbar--closing .mdc-snackbar__surface {
-  transform: scale(1);
-  transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
+  border-radius: 0.75rem;
+  background-color: rgb(var(--contrast-1400));
+  box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);
 }
 
 .mdc-snackbar__label {
-  -moz-osx-font-smoothing: grayscale;
+  visibility: hidden;
+  color: rgb(var(--contrast-100));
   -webkit-font-smoothing: antialiased;
-  font-family: inherit;
-  /* @alternate */
-  font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, inherit));
   font-size: 0.8125rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-body2-font-size, 0.8125rem);
-  line-height: 1.625rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-body2-line-height, 1.625rem);
   font-weight: 400;
-  /* @alternate */
-  font-weight: var(--mdc-typography-body2-font-weight, 400);
-  letter-spacing: 0.0178571429em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-body2-text-transform, inherit);
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 16px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 8px;
+  padding: 0 0.25rem;
   width: 100%;
   flex-grow: 1;
-  box-sizing: border-box;
-  margin: 0;
-  visibility: hidden;
-  padding-top: 14px;
-  padding-bottom: 14px;
-}
-[dir=rtl] .mdc-snackbar__label, .mdc-snackbar__label[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 8px;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 16px;
-  /*rtl:end:ignore*/
-}
-
-.mdc-snackbar__label::before {
-  display: inline;
-  content: attr(data-mdc-snackbar-label-text);
 }
 
 .mdc-snackbar__actions {
+  visibility: hidden;
   display: flex;
   flex-shrink: 0;
   align-items: center;
   box-sizing: border-box;
-  visibility: hidden;
-}
-
-.mdc-snackbar__action:not(:disabled) {
-  color: #bb86fc;
-}
-.mdc-snackbar__action::before, .mdc-snackbar__action::after {
-  background-color: #bb86fc;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, #bb86fc);
-}
-.mdc-snackbar__action:hover::before, .mdc-snackbar__action.mdc-ripple-surface--hover::before {
-  opacity: 0.08;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.08);
-}
-.mdc-snackbar__action.mdc-ripple-upgraded--background-focused::before, .mdc-snackbar__action:not(.mdc-ripple-upgraded):focus::before {
-  transition-duration: 75ms;
-  opacity: 0.24;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.24);
-}
-.mdc-snackbar__action:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-snackbar__action:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.24;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.24);
-}
-.mdc-snackbar__action.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
-}
-
-.mdc-snackbar__dismiss {
-  color: rgba(255, 255, 255, 0.87);
-}
-.mdc-snackbar__dismiss .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss .mdc-icon-button__ripple::after {
-  background-color: rgba(255, 255, 255, 0.87);
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, rgba(255, 255, 255, 0.87));
-}
-.mdc-snackbar__dismiss:hover .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
-  opacity: 0.08;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.08);
-}
-.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.24;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.24);
-}
-.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
-  transition: opacity 150ms linear;
-}
-.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.24;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.24);
-}
-.mdc-snackbar__dismiss.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
-}
-
-.mdc-snackbar__dismiss.mdc-snackbar__dismiss {
-  width: 36px;
-  height: 36px;
-  padding: 6px;
-  font-size: 18px;
-}
-.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size {
-  width: 36px;
-  height: 36px;
-  padding: 6px;
-}
-.mdc-snackbar__dismiss.mdc-snackbar__dismiss.mdc-icon-button--reduced-size.mdc-icon-button--touch {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-right: 0px;
-  margin-left: 0px;
-}
-.mdc-snackbar__dismiss.mdc-snackbar__dismiss .mdc-icon-button__touch {
-  position: absolute;
-  top: 50%;
-  height: 36px;
-  /* @noflip */ /*rtl:ignore*/
-  left: 50%;
-  width: 36px;
-  transform: translate(-50%, -50%);
-}
-
-.mdc-snackbar__action + .mdc-snackbar__dismiss {
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 8px;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 0;
-}
-[dir=rtl] .mdc-snackbar__action + .mdc-snackbar__dismiss, .mdc-snackbar__action + .mdc-snackbar__dismiss[dir=rtl] {
-  /*rtl:begin:ignore*/
-  /* @noflip */ /*rtl:ignore*/
-  margin-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  margin-right: 8px;
-  /*rtl:end:ignore*/
-}
-
-/**
- * @prop --snackbar-top: Snackbar has `position: fixed;` and uses `--snackbar-top`, which defaults to `auto` for its `top` property. See the examples in the documentations for further info.
- * @prop --snackbar-right: Snackbar has `position: fixed;` and uses `--snackbar-right`, which defaults to `0` for its `right` property. See the examples in the documentations for further info.
- * @prop --snackbar-bottom: Snackbar has `position: fixed;` and uses `--snackbar-bottom`, which defaults to `0` for its `bottom` property. See the examples in the documentations for further info.
- * @prop --snackbar-left: Snackbar has `position: fixed;` and uses `--snackbar-left`, which defaults to `0` for its `left` property. See the examples in the documentations for further info.
- */
-.mdc-snackbar {
-  top: var(--snackbar-top, auto);
-  right: var(--snackbar-right, 0);
-  bottom: var(--snackbar-bottom, 0);
-  left: var(--snackbar-left, 0);
-}
-
-.mdc-snackbar__surface {
-  min-width: unset;
-  max-width: 42rem;
-  background-color: rgb(var(--contrast-1400));
-  box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);
-  gap: 0.75rem;
-}
-
-.mdc-snackbar__label {
-  font-family: inherit;
-}
-
-.mdc-snackbar__label {
-  color: rgb(var(--contrast-100));
-}
-
-.mdc-snackbar__actions {
   gap: 0.5rem;
 }
 
+.dismiss,
 .mdc-snackbar__actions {
   --lime-elevated-surface-background-color: rgb(
       var(--contrast-1300)
   );
 }
-.mdc-snackbar__actions limel-icon-button.mdc-snackbar__dismiss {
-  transform: scale(0.8);
-  margin: 0;
-  padding: 0;
-}
 
 .dismiss {
   --mdc-theme-on-surface: rgb(var(--contrast-100));
   --icon-background-color: var(--lime-elevated-surface-background-color);
   --fill-color: var(--mdc-theme-primary);
   --track-color: rgb(var(--contrast-800), 0.2);
-  position: relative;
+  position: absolute;
+  top: -0.9rem;
+  left: -0.9rem;
+  transform: scale(0.8);
   display: flex;
   align-items: center;
   justify-content: center;
 }
+.dismiss limel-icon-button.mdc-snackbar__dismiss {
+  transform: scale(0.8);
+  margin: 0;
+  padding: 0;
+}
 .dismiss svg {
   position: absolute;
   transform: rotate(90deg);

package/dist/collection/components/snackbar/snackbar.js

@@ -73,7 +73,7 @@ export class Snackbar {
                     ${this.multiline ? 'mdc-snackbar--stacked' : ''}
                 `, style: {
         '--snackbar-timeout': `${this.timeout}ms`,
-      } }, h("div", { class: "mdc-snackbar__surface", role: "status", "aria-relevant": "additions" }, h("div", { class: "mdc-snackbar__label", "aria-atomic": "false" }), this.renderActions(this.actionText, this.dismissible))));
+      } }, h("div", { class: "mdc-snackbar__surface", role: "status", "aria-relevant": "additions" }, h("div", { class: "mdc-snackbar__label", "aria-atomic": "false" }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
   }
   handleMdcClosing(event) {
     if (event.detail.reason === 'action') {
@@ -83,11 +83,11 @@ export class Snackbar {
       this.hide.emit();
     }
   }
-  renderActions(actionText, dismissible) {
-    if (!actionText && !dismissible) {
+  renderActions(actionText) {
+    if (!actionText) {
       return;
     }
-    return (h("div", { class: "mdc-snackbar__actions", "aria-atomic": "true" }, this.renderActionButton(actionText), this.renderDismissButton(dismissible)));
+    return (h("div", { class: "mdc-snackbar__actions", "aria-atomic": "true" }, this.renderActionButton(actionText)));
   }
   renderActionButton(actionText) {
     if (!actionText) {

package/dist/collection/components/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport { MDCSnackbar, MDCSnackbarCloseEvent } from '@material/snackbar';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n} from '@stencil/core';\nimport translate from '../../global/translations';\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-positioning\n */\n\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     */\n    @Prop()\n    // eslint-disable-next-line no-magic-numbers\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private hide: EventEmitter<void>;\n\n    private mdcSnackbar: MDCSnackbar;\n\n    constructor() {\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-snackbar');\n        if (!element) {\n            return;\n        }\n\n        this.mdcSnackbar = new MDCSnackbar(element);\n\n        this.mdcSnackbar.listen('MDCSnackbar:closing', this.handleMdcClosing);\n    }\n\n    public disconnectedCallback() {\n        this.mdcSnackbar.unlisten('MDCSnackbar:closing', this.handleMdcClosing);\n        this.mdcSnackbar.destroy();\n    }\n\n    /**\n     * Show the snackbar\n     */\n    @Method()\n    public async show() {\n        if (this.timeout) {\n            this.mdcSnackbar.timeoutMs = this.timeout;\n        }\n\n        this.mdcSnackbar.labelText = this.message;\n\n        this.mdcSnackbar.open();\n    }\n\n    public render() {\n        return (\n            <aside\n                class={`\n                    mdc-snackbar\n                    ${this.multiline ? 'mdc-snackbar--stacked' : ''}\n                `}\n                style={{\n                    '--snackbar-timeout': `${this.timeout}ms`,\n                }}\n            >\n                <div\n                    class=\"mdc-snackbar__surface\"\n                    role=\"status\"\n                    aria-relevant=\"additions\"\n                >\n                    <div class=\"mdc-snackbar__label\" aria-atomic=\"false\"></div>\n                    {this.renderActions(this.actionText, this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private handleMdcClosing(event: MDCSnackbarCloseEvent) {\n        if (event.detail.reason === 'action') {\n            this.action.emit();\n        } else {\n            this.hide.emit();\n        }\n    }\n\n    private renderActions(actionText: string, dismissible: boolean) {\n        if (!actionText && !dismissible) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-snackbar__actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n                {this.renderDismissButton(dismissible)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button\n                class=\"mdc-button mdc-snackbar__action\"\n                label={actionText}\n            />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"mdc-icon-button mdc-snackbar__dismiss\"\n                    icon=\"multiply\"\n                    label={label}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"]}
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAyB,MAAM,oBAAoB,CAAC;AACxE,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,MAAM,EACN,IAAI,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,MAAM,OAAO,QAAQ;EAwDjB;;mBA5C0B,IAAI;;uBAaA,IAAI;;oBAYL,IAAI;IAoB7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5D;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACpE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,OAAO,CAAC,CAAC;IAE5C,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;EAC1E,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;EAC/B,CAAC;EAED;;KAEG;EAEI,KAAK,CAAC,IAAI;IACb,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;KAC7C;IAED,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAE1C,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;EAC5B,CAAC;EAEM,MAAM;IACT,OAAO,CACH,aACI,KAAK,EAAE;;sBAED,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;iBAClD,EACD,KAAK,EAAE;QACH,oBAAoB,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI;OAC5C;MAED,WACI,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,QAAQ,mBACC,WAAW;QAEzB,WAAK,KAAK,EAAC,qBAAqB,iBAAa,OAAO,GAAO;QAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CACzC,CACF,CACX,CAAC;EACN,CAAC;EAEO,gBAAgB,CAAC,KAA4B;IACjD,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,QAAQ,EAAE;MAClC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB;SAAM;MACH,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KACpB;EACL,CAAC;EAEO,aAAa,CAAC,UAAkB;IACpC,IAAI,CAAC,UAAU,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,WAAK,KAAK,EAAC,uBAAuB,iBAAa,MAAM,IAChD,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAClC,CACT,CAAC;EACN,CAAC;EAEO,kBAAkB,CAAC,UAAkB;IACzC,IAAI,CAAC,UAAU,EAAE;MACb,OAAO;KACV;IAED,OAAO,CACH,oBACI,KAAK,EAAC,iCAAiC,EACvC,KAAK,EAAE,UAAU,GACnB,CACL,CAAC;EACN,CAAC;EAEO,mBAAmB,CAAC,WAAoB;IAC5C,IAAI,CAAC,WAAW,EAAE;MACd,OAAO;KACV;IAED,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE/D,OAAO,CACH,WAAK,KAAK,EAAC,SAAS;MACf,IAAI,CAAC,0BAA0B,EAAE;MAClC,yBACI,KAAK,EAAC,uCAAuC,EAC7C,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,GACd,CACA,CACT,CAAC;EACN,CAAC;EAEO,0BAA0B;IAC9B,OAAO,CACH,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;MAC3C,cAAQ,CAAC,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,GAAG;MAC3D,YACI,KAAK,EAAC,OAAO,EACb,CAAC,EAAC,wDAAwD,EAC1D,MAAM,EAAC,mBAAmB,GAC5B,CACA,CACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport { MDCSnackbar, MDCSnackbarCloseEvent } from '@material/snackbar';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Method,\n    Prop,\n} from '@stencil/core';\nimport translate from '../../global/translations';\n\n/**\n * A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n *\n * The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n *\n * It means if the user misses the information, it shouldn't be a big deal.\n *\n * :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n *\n * @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-positioning\n */\n\n@Component({\n    tag: 'limel-snackbar',\n    shadow: true,\n    styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n    /**\n     * The text message to display.\n     */\n    @Prop()\n    public message: string;\n\n    /**\n     * The amount of time in milliseconds to show the snackbar.\n     */\n    @Prop()\n    // eslint-disable-next-line no-magic-numbers\n    public timeout?: number = 5000;\n\n    /**\n     * The text to display for the action button.\n     */\n    @Prop()\n    public actionText: string;\n\n    /**\n     * When `true` displays a dismiss button on the snackbar,\n     * allowing users to close it.\n     */\n    @Prop()\n    public dismissible: boolean = true;\n\n    /**\n     * Whether to show the snackbar with space for multiple lines of text\n     */\n    @Prop()\n    public multiline: boolean;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    @Element()\n    private host: HTMLLimelSnackbarElement;\n\n    /**\n     * Emitted when the action button is pressed\n     */\n    @Event()\n    private action: EventEmitter<void>;\n\n    /**\n     * Emitted when the snackbar hides itself\n     */\n    @Event()\n    private hide: EventEmitter<void>;\n\n    private mdcSnackbar: MDCSnackbar;\n\n    constructor() {\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-snackbar');\n        if (!element) {\n            return;\n        }\n\n        this.mdcSnackbar = new MDCSnackbar(element);\n\n        this.mdcSnackbar.listen('MDCSnackbar:closing', this.handleMdcClosing);\n    }\n\n    public disconnectedCallback() {\n        this.mdcSnackbar.unlisten('MDCSnackbar:closing', this.handleMdcClosing);\n        this.mdcSnackbar.destroy();\n    }\n\n    /**\n     * Show the snackbar\n     */\n    @Method()\n    public async show() {\n        if (this.timeout) {\n            this.mdcSnackbar.timeoutMs = this.timeout;\n        }\n\n        this.mdcSnackbar.labelText = this.message;\n\n        this.mdcSnackbar.open();\n    }\n\n    public render() {\n        return (\n            <aside\n                class={`\n                    mdc-snackbar\n                    ${this.multiline ? 'mdc-snackbar--stacked' : ''}\n                `}\n                style={{\n                    '--snackbar-timeout': `${this.timeout}ms`,\n                }}\n            >\n                <div\n                    class=\"mdc-snackbar__surface\"\n                    role=\"status\"\n                    aria-relevant=\"additions\"\n                >\n                    <div class=\"mdc-snackbar__label\" aria-atomic=\"false\"></div>\n                    {this.renderActions(this.actionText)}\n                    {this.renderDismissButton(this.dismissible)}\n                </div>\n            </aside>\n        );\n    }\n\n    private handleMdcClosing(event: MDCSnackbarCloseEvent) {\n        if (event.detail.reason === 'action') {\n            this.action.emit();\n        } else {\n            this.hide.emit();\n        }\n    }\n\n    private renderActions(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <div class=\"mdc-snackbar__actions\" aria-atomic=\"true\">\n                {this.renderActionButton(actionText)}\n            </div>\n        );\n    }\n\n    private renderActionButton(actionText: string) {\n        if (!actionText) {\n            return;\n        }\n\n        return (\n            <limel-button\n                class=\"mdc-button mdc-snackbar__action\"\n                label={actionText}\n            />\n        );\n    }\n\n    private renderDismissButton(dismissible: boolean) {\n        if (!dismissible) {\n            return;\n        }\n\n        const label = translate.get('snackbar.dismiss', this.language);\n\n        return (\n            <div class=\"dismiss\">\n                {this.renderTimeoutVisualization()}\n                <limel-icon-button\n                    class=\"mdc-icon-button mdc-snackbar__dismiss\"\n                    icon=\"multiply\"\n                    label={label}\n                />\n            </div>\n        );\n    }\n\n    private renderTimeoutVisualization() {\n        return (\n            <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n                <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n                <path\n                    class=\"track\"\n                    d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n                    stroke=\"var(--fill-color)\"\n                />\n            </svg>\n        );\n    }\n}\n"]}

package/dist/collection/components/text-editor/prosemirror-adapter/menu/menu-commands.js

@@ -1,5 +1,6 @@
 import { toggleMark, setBlockType, wrapIn } from 'prosemirror-commands';
-import { wrapInList } from 'prosemirror-schema-list';
+import { findWrapping, liftTarget } from 'prosemirror-transform';
+import { TextSelection } from 'prosemirror-state';
 import { EditorMenuTypes, LevelMapping } from './types';
 const setActiveMethodForMark = (command, markType) => {
   command.active = (state) => {
@@ -17,7 +18,7 @@ const setActiveMethodForNode = (command, nodeType, level) => {
     const { $from } = state.selection;
     const node = $from.node($from.depth);
     if (node && node.type.name === nodeType.name) {
-      if (nodeType.name === 'heading') {
+      if (nodeType.name === LevelMapping.Heading && level) {
         return node.attrs.level === level;
       }
       return true;
@@ -62,14 +63,44 @@ const getAttributes = (markName, url) => {
 const isExternalLink = (url) => {
   return !url.startsWith(window.location.origin);
 };
+const toggleBlockType = (schema, type, attrs = {}, wrap = false) => {
+  const blockType = schema.nodes[type];
+  const paragraphType = schema.nodes.paragraph;
+  return (state, dispatch) => {
+    const { $from, to } = state.selection;
+    if (state.selection instanceof TextSelection &&
+      $from.sameParent($from.doc.resolve(to))) {
+      if ($from.parent.type === blockType) {
+        if (dispatch) {
+          dispatch(state.tr.setBlockType($from.pos, to, paragraphType));
+        }
+        return true;
+      }
+      else {
+        if (wrap) {
+          return wrapIn(blockType, attrs)(state, dispatch);
+        }
+        else {
+          return setBlockType(blockType, attrs)(state, dispatch);
+        }
+      }
+    }
+    return false;
+  };
+};
 const createSetNodeTypeCommand = (schema, nodeType, level) => {
   const type = schema.nodes[nodeType];
   if (!type) {
     throw new Error(`Node type "${nodeType}" not found in schema`);
   }
   let command;
-  if (nodeType === 'heading' && level) {
-    command = setBlockType(type, { level: level });
+  if (nodeType === LevelMapping.Heading && level) {
+    command = toggleBlockType(schema, LevelMapping.Heading, {
+      level: level,
+    });
+  }
+  else if (nodeType === EditorMenuTypes.CodeBlock) {
+    command = toggleBlockType(schema, EditorMenuTypes.CodeBlock);
   }
   else {
     command = setBlockType(type);
@@ -82,16 +113,50 @@ const createWrapInCommand = (schema, nodeType) => {
   if (!type) {
     throw new Error(`Node type "${nodeType}" not found in schema`);
   }
-  const command = wrapIn(type);
+  let command;
+  if (nodeType === EditorMenuTypes.Blockquote) {
+    command = toggleBlockType(schema, EditorMenuTypes.Blockquote, {}, true);
+  }
+  else {
+    command = wrapIn(type);
+  }
   setActiveMethodForWrap(command, type);
   return command;
 };
+const toggleList = (listType) => {
+  return (state, dispatch) => {
+    const { $from, $to } = state.selection;
+    const range = $from.blockRange($to);
+    if (!range) {
+      return false;
+    }
+    const wrapping = range && findWrapping(range, listType);
+    if (wrapping) {
+      // Wrap the selection in a list
+      if (dispatch) {
+        dispatch(state.tr.wrap(range, wrapping).scrollIntoView());
+      }
+      return true;
+    }
+    else {
+      // Check if we are in a list item and lift out of the list
+      const liftRange = range && liftTarget(range);
+      if (liftRange !== null) {
+        if (dispatch) {
+          dispatch(state.tr.lift(range, liftRange).scrollIntoView());
+        }
+        return true;
+      }
+      return false;
+    }
+  };
+};
 const createListCommand = (schema, listType) => {
   const type = schema.nodes[listType];
   if (!type) {
     throw new Error(`List type "${listType}" not found in schema`);
   }
-  const command = wrapInList(type);
+  const command = toggleList(type);
   setActiveMethodForWrap(command, type);
   return command;
 };
@@ -99,15 +164,18 @@ const commandMapping = {
   strong: createToggleMarkCommand,
   em: createToggleMarkCommand,
   underline: createToggleMarkCommand,
+  strikethrough: createToggleMarkCommand,
+  code: createToggleMarkCommand,
+  link: createToggleMarkCommand,
   headerlevel1: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.one),
   headerlevel2: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.two),
   headerlevel3: (schema) => createSetNodeTypeCommand(schema, LevelMapping.Heading, LevelMapping.three),
-  blockquote: createWrapInCommand,
+  blockquote: (schema) => createWrapInCommand(schema, EditorMenuTypes.Blockquote),
   /* eslint-disable camelcase */
-  ordered_list: createListCommand,
-  bullet_list: createListCommand,
+  code_block: (schema) => createSetNodeTypeCommand(schema, EditorMenuTypes.CodeBlock),
+  ordered_list: (schema) => createListCommand(schema, EditorMenuTypes.OrderedList),
+  bullet_list: (schema) => createListCommand(schema, EditorMenuTypes.BulletList),
   /* eslint-enable camelcase */
-  link: createToggleMarkCommand,
 };
 export class MenuCommandFactory {
   constructor(schema) {
@@ -127,6 +195,9 @@ export class MenuCommandFactory {
       'Mod-Shift-1': this.getCommand(EditorMenuTypes.HeaderLevel1),
       'Mod-Shift-2': this.getCommand(EditorMenuTypes.HeaderLevel2),
       'Mod-Shift-3': this.getCommand(EditorMenuTypes.HeaderLevel3),
+      'Mod-Shift-X': this.getCommand(EditorMenuTypes.Strikethrough),
+      'Mod-`': this.getCommand(EditorMenuTypes.Code),
+      'Mod-Shift-C': this.getCommand(EditorMenuTypes.CodeBlock),
     };
   }
 }