@limetech/lime-elements 37.1.0-next.44 → 37.1.0-next.45

package/dist/esm/limel-file-viewer.entry.js

@@ -0,0 +1,256 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
+import { t as translate } from './translations-dea847ae.js';
+
+function detectExtension(fileName, url) {
+  const pathLike = fileName || url;
+  if (!pathLike) {
+    return 'unknown';
+  }
+  const extension = pathLike.split('.').pop().toLowerCase();
+  const extensionsToTypes = {
+    pdf: 'pdf',
+    jpg: 'image',
+    jpeg: 'image',
+    heic: 'image',
+    bmp: 'image',
+    png: 'image',
+    gif: 'image',
+    svg: 'image',
+    svgz: 'image',
+    ep: 'image',
+    eps: 'image',
+    avi: 'video',
+    flv: 'video',
+    h264: 'video',
+    mov: 'video',
+    mp4: 'video',
+    mwv: 'video',
+    mkv: 'video',
+    mp3: 'audio',
+    wav: 'audio',
+    wma: 'audio',
+    ogg: 'audio',
+    txt: 'text',
+    json: 'text',
+    html: 'text',
+    xml: 'text',
+    // Word
+    doc: 'office',
+    docx: 'office',
+    odt: 'office',
+    dot: 'office',
+    dotx: 'office',
+    docm: 'office',
+    dotm: 'office',
+    // Presentation
+    pot: 'office',
+    ppt: 'office',
+    pptx: 'office',
+    odp: 'office',
+    potx: 'office',
+    potm: 'office',
+    pps: 'office',
+    ppsx: 'office',
+    ppsm: 'office',
+    pptm: 'office',
+    ppam: 'office',
+    pages: 'office',
+    // Spreadsheet
+    xls: 'office',
+    xlsx: 'office',
+    xlsm: 'office',
+    xlsb: 'office',
+    ods: 'office',
+    csv: 'office',
+    numbers: 'office', // not supported (Apple)
+  };
+  return extensionsToTypes[extension] || 'unknown';
+}
+
+class Fullscreen {
+  constructor(element) {
+    this.requestFullscreen = () => {
+      if (this.enter) {
+        this.enter();
+      }
+    };
+    this.exitFullscreen = () => {
+      if (this.exit) {
+        this.exit.bind(window.document)();
+      }
+    };
+    this.toggle = () => {
+      const doc = window.document;
+      const isFullscreen = doc.fullscreenElement ||
+        doc.mozFullScreenElement ||
+        doc.webkitFullscreenElement ||
+        doc.msFullscreenElement;
+      if (isFullscreen) {
+        this.exitFullscreen();
+      }
+      else {
+        this.requestFullscreen();
+      }
+    };
+    this.enter =
+      element.requestFullscreen ||
+        element.msRequestFullscreen ||
+        element.mozRequestFullScreen ||
+        element.webkitRequestFullscreen;
+    this.enter = this.enter.bind(element);
+    const doc = window.document;
+    this.exit =
+      doc.exitFullscreen ||
+        doc.msExitFullscreen ||
+        doc.mozCancelFullScreen ||
+        doc.webkitExitFullscreen;
+  }
+  isSupported() {
+    return !!this.requestFullscreen;
+  }
+}
+
+const fileViewerCss = ":host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}:host{isolation:isolate;position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%}*{box-sizing:border-box}img,video,audio,object,iframe{max-height:100%;max-width:100%;box-sizing:border-box}iframe{border:none;width:100%;height:100%;min-height:20rem}img{min-width:7rem;object-fit:contain}video{width:100%;height:auto}audio{width:100%}object{width:100%;height:100%}object[type=\"application/pdf\"]{min-height:20rem}object[type=\"text/plain\"]{border-radius:0.25rem;padding-right:2rem;overflow-y:auto}:host(:fullscreen){background-color:rgb(var(--color-gray-darker))}:host(:fullscreen) object[type=\"text/plain\"]{max-width:50rem;max-height:calc(100% - 2rem)}:host(:-webkit-full-screen){background-color:rgb(var(--color-gray-darker))}:host(:-webkit-full-screen) object[type=\"text/plain\"]{max-width:50rem;max-height:calc(100% - 2rem)}.buttons{position:absolute;z-index:1;top:0.25rem;right:0.25rem;display:flex;flex-direction:column;gap:0.25rem}@media (pointer: coarse){.buttons{gap:0.5rem}}.no-support{display:flex;flex-direction:column;align-items:center;border:1px dashed rgb(var(--contrast-600));border-radius:0.5rem;padding:1.25rem}.no-support .icon--warning{color:rgb(var(--color-orange-default))}[class^=button--]{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);display:flex;align-items:center;justify-content:center;border-radius:50%;width:2rem;height:2rem;background-color:rgba(var(--contrast-100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}[class^=button--]:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}[class^=button--]:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}[class^=button--]:focus{outline:none}[class^=button--]:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}[class^=button--] limel-icon{transition:color 0.2s ease;width:1.25rem;color:rgb(var(--contrast-1200))}[class^=button--]:hover limel-icon{color:rgb(var(--contrast-1400))}.action-menu-for-pdf-files,.action-menu-for-office-files{position:absolute;right:0.75rem}.action-menu-for-pdf-files{bottom:0.75rem}.action-menu-for-office-files{top:0.75rem}";
+
+const FileViewer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.action = createEvent(this, "action", 7);
+    this.renderPdf = () => {
+      return [
+        h("div", { class: "action-menu-for-pdf-files" }, this.renderActionMenu()),
+        h("object", { data: this.url, type: "application/pdf" }),
+      ];
+    };
+    this.renderImage = () => {
+      return [this.renderButtons(), h("img", { src: this.url, alt: this.alt })];
+    };
+    this.renderVideo = () => {
+      return (h("video", { controls: true }, h("source", { src: this.url })));
+    };
+    this.renderAudio = () => {
+      return (h("audio", { controls: true }, h("source", { src: this.url })));
+    };
+    this.renderText = () => {
+      return [
+        this.renderButtons(),
+        h("object", { data: this.url, type: "text/plain" }),
+      ];
+    };
+    this.renderOffice = () => {
+      return [
+        h("div", { class: "action-menu-for-office-files" }, this.renderActionMenu()),
+        h("iframe", { src: this.getOfficeViewerUrl() + this.url + '&embedded=true', frameborder: "0" }),
+      ];
+    };
+    this.isOfficeFileAccessibleViaURL = () => {
+      return (this.fileType === 'office' &&
+        !(this.url.startsWith('http://') || this.url.startsWith('https://')));
+    };
+    this.getOfficeViewerUrl = () => {
+      const officeViewers = {
+        'microsoft-office': 'https://view.officeapps.live.com/op/embed.aspx?src=',
+        'google-drive': 'https://docs.google.com/gview?url=',
+      };
+      return officeViewers[this.officeViewer];
+    };
+    this.renderNoFileSupportMessage = () => {
+      return (h("div", { class: "no-support" }, h("limel-icon", { class: "icon--warning", name: "brake_warning", size: "large", role: "presentation" }), h("p", null, this.getTranslation('message.unsupported-filetype')), this.renderDownloadButton()));
+    };
+    this.renderButtons = () => {
+      return (h("div", { class: "buttons" }, this.renderActionMenu(), this.renderToggleFullscreenButton(), this.renderDownloadButton(), this.renderOpenInNewTabButton()));
+    };
+    this.renderToggleFullscreenButton = () => {
+      if (!this.allowFullscreen || !this.fullscreen.isSupported()) {
+        return;
+      }
+      const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';
+      // eslint-disable-next-line multiline-ternary
+      const label = this.isFullscreen
+        ? // eslint-disable-next-line multiline-ternary
+          this.getTranslation('exit-fullscreen')
+        : this.getTranslation('open-in-fullscreen');
+      return [
+        h("button", { class: "button--toggle-fullscreen", id: "tooltip-toggle-fullscreen", role: "button", onClick: this.handleToggleFullscreen }, h("limel-icon", { name: icon }), h("limel-tooltip", { label: label, elementId: "tooltip-toggle-fullscreen", openDirection: "left" })),
+      ];
+    };
+    this.renderDownloadButton = () => {
+      if (!this.allowDownload || this.isFullscreen) {
+        return;
+      }
+      return (h("a", { class: "button--download", id: "tooltip-download", role: "button", download: this.filename ? this.filename : '', href: this.url, target: "_blank" }, h("limel-icon", { name: "download_2" }), h("limel-tooltip", { label: this.getTranslation('download'), elementId: "tooltip-download", openDirection: "left" })));
+    };
+    this.renderOpenInNewTabButton = () => {
+      if (!this.allowOpenInNewTab || this.isFullscreen) {
+        return;
+      }
+      return (h("a", { class: "button--new-tab", id: "tooltip-new-tab", role: "button", href: this.url, target: "_blank", rel: "noopener noreferrer" }, h("limel-icon", { name: "external_link" }), h("limel-tooltip", { label: this.getTranslation('open-in-new-tab'), elementId: "tooltip-new-tab", openDirection: "left" })));
+    };
+    this.renderActionMenu = () => {
+      if (!this.actions || this.isFullscreen) {
+        return;
+      }
+      return (h("limel-menu", { class: "action-menu", items: this.actions, onSelect: this.emitOnAction, "open-direction": "left" }, h("button", { class: "button--action", id: "tooltip-more", role: "button", slot: "trigger" }, h("limel-icon", { name: "menu_2" }), h("limel-tooltip", { label: this.getTranslation('more-actions'), elementId: "tooltip-more", openDirection: "left" }))));
+    };
+    this.handleToggleFullscreen = () => {
+      if (this.fullscreen.isSupported()) {
+        this.fullscreen.toggle();
+        this.isFullscreen = !this.isFullscreen;
+      }
+    };
+    this.emitOnAction = (event) => {
+      event.stopPropagation();
+      this.action.emit(event.detail);
+    };
+    this.url = undefined;
+    this.filename = undefined;
+    this.alt = undefined;
+    this.allowFullscreen = false;
+    this.allowOpenInNewTab = false;
+    this.allowDownload = false;
+    this.language = 'en';
+    this.officeViewer = 'microsoft-office';
+    this.actions = undefined;
+    this.isFullscreen = false;
+    this.fileType = undefined;
+    this.fullscreen = new Fullscreen(this.HostElement);
+    this.fileType = detectExtension(this.filename, this.url);
+  }
+  render() {
+    if (!this.isOfficeFileAccessibleViaURL) {
+      return this.renderNoFileSupportMessage();
+    }
+    return this.renderFileViewer();
+  }
+  watchUrl(newUrl, oldUrl) {
+    if (newUrl === oldUrl) {
+      return;
+    }
+    this.fileType = detectExtension(this.filename, this.url);
+  }
+  renderFileViewer() {
+    const fileViewerFunctions = {
+      pdf: this.renderPdf,
+      image: this.renderImage,
+      video: this.renderVideo,
+      audio: this.renderAudio,
+      text: this.renderText,
+      office: this.renderOffice,
+    };
+    const fileViewerFunction = fileViewerFunctions[this.fileType] ||
+      this.renderNoFileSupportMessage;
+    return fileViewerFunction();
+  }
+  getTranslation(key) {
+    return translate.get(`file-viewer.${key}`, this.language);
+  }
+  get HostElement() { return getElement(this); }
+  static get watchers() { return {
+    "url": ["watchUrl"]
+  }; }
+};
+FileViewer.style = fileViewerCss;
+
+export { FileViewer as limel_file_viewer };
+
+//# sourceMappingURL=limel-file-viewer.entry.js.map

package/dist/esm/limel-file-viewer.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-file-viewer.entry.js","mappings":"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","names":[],"sources":["./src/components/file-viewer/extension-mapping.tsx","./src/components/file-viewer/fullscreen.ts","./src/components/file-viewer/file-viewer.scss?tag=limel-file-viewer&encapsulation=shadow","./src/components/file-viewer/file-viewer.tsx"],"sourcesContent":["export function detectExtension(fileName, url): any {\n    const pathLike = fileName || url;\n    if (!pathLike) {\n        return 'unknown';\n    }\n\n    const extension = pathLike.split('.').pop().toLowerCase();\n    const extensionsToTypes = {\n        pdf: 'pdf',\n        jpg: 'image',\n        jpeg: 'image',\n        heic: 'image',\n        bmp: 'image',\n        png: 'image',\n        gif: 'image',\n        svg: 'image',\n        svgz: 'image',\n        ep: 'image',\n        eps: 'image',\n        avi: 'video',\n        flv: 'video',\n        h264: 'video',\n        mov: 'video',\n        mp4: 'video',\n        mwv: 'video',\n        mkv: 'video',\n        mp3: 'audio',\n        wav: 'audio',\n        wma: 'audio',\n        ogg: 'audio',\n        txt: 'text',\n        json: 'text',\n        html: 'text',\n        xml: 'text',\n        // Word\n        doc: 'office',\n        docx: 'office',\n        odt: 'office',\n        dot: 'office',\n        dotx: 'office',\n        docm: 'office', // not supported\n        dotm: 'office', // not yet tested\n        // Presentation\n        pot: 'office', // not tested\n        ppt: 'office',\n        pptx: 'office',\n        odp: 'office',\n        potx: 'office', // not supported\n        potm: 'office', // not supported\n        pps: 'office',\n        ppsx: 'office',\n        ppsm: 'office', // not supported\n        pptm: 'office', // not supported\n        ppam: 'office', // not tested\n        pages: 'office', // not supported (Apple)\n        // Spreadsheet\n        xls: 'office',\n        xlsx: 'office',\n        xlsm: 'office',\n        xlsb: 'office',\n        ods: 'office',\n        csv: 'office', // not supported\n        numbers: 'office', // not supported (Apple)\n    };\n\n    return extensionsToTypes[extension] || 'unknown';\n}\n","export class Fullscreen {\n    private enter: () => void;\n    private exit: () => void;\n\n    constructor(element: any) {\n        this.enter =\n            element.requestFullscreen ||\n            element.msRequestFullscreen ||\n            element.mozRequestFullScreen ||\n            element.webkitRequestFullscreen;\n        this.enter = this.enter.bind(element);\n        const doc: any = window.document;\n        this.exit =\n            doc.exitFullscreen ||\n            doc.msExitFullscreen ||\n            doc.mozCancelFullScreen ||\n            doc.webkitExitFullscreen;\n    }\n\n    public requestFullscreen = () => {\n        if (this.enter) {\n            this.enter();\n        }\n    };\n\n    public exitFullscreen = () => {\n        if (this.exit) {\n            this.exit.bind(window.document)();\n        }\n    };\n\n    public toggle = () => {\n        const doc: any = window.document;\n        const isFullscreen =\n            doc.fullscreenElement ||\n            doc.mozFullScreenElement ||\n            doc.webkitFullscreenElement ||\n            doc.msFullscreenElement;\n\n        if (isFullscreen) {\n            this.exitFullscreen();\n        } else {\n            this.requestFullscreen();\n        }\n    };\n\n    public isSupported(): boolean {\n        return !!this.requestFullscreen;\n    }\n}\n","@use '../../style/internal/variables';\n@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins';\n\n$size-of-buttons: 2rem;\n\n:host {\n    isolation: isolate;\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nimg,\nvideo,\naudio,\nobject,\niframe {\n    max-height: 100%;\n    max-width: 100%;\n    box-sizing: border-box;\n}\n\niframe {\n    border: none;\n    width: 100%;\n    height: 100%;\n    min-height: 20rem; // makes sure to get minimum comfortable space for viewing office files, and Microsoft Office viewers toolbars\n}\n\nimg {\n    min-width: 7rem;\n    object-fit: contain; // increases or decreases the size of the image to fill the box whilst preserving its aspect-ratio.\n}\n\nvideo {\n    width: 100%;\n    height: auto;\n}\n\naudio {\n    width: 100%;\n}\n\nobject {\n    width: 100%;\n    height: 100%;\n}\n\nobject[type='application/pdf'] {\n    min-height: 20rem;\n    // makes sure to get browsers' native controls for the PDF\n}\n\nobject[type='text/plain'] {\n    border-radius: 0.25rem;\n    padding-right: $size-of-buttons;\n\n    overflow-y: auto;\n}\n\n@mixin plain-text-in-fullscreen {\n    background-color: rgb(var(--color-gray-darker));\n\n    object[type='text/plain'] {\n        max-width: 50rem;\n        max-height: calc(100% - 2rem);\n    }\n}\n\n:host(:fullscreen) {\n    @include plain-text-in-fullscreen;\n}\n:host(:-webkit-full-screen) {\n    // this is repetition of the previous block,\n    // but needed for Safari to work.\n    // Cannot write SCSS rules for `:host` using commas for some reason.\n    // e.g.: `:host(:fullscreen), :host(:-webkit-full-screen)`.\n    // So you have to repeat it sadly.\n    @include plain-text-in-fullscreen;\n}\n\n@import './partial-styles/ui-controls.scss';\n","import {\n    Component,\n    Element,\n    h,\n    Prop,\n    State,\n    Event,\n    EventEmitter,\n    Watch,\n} from '@stencil/core';\nimport { Languages, ListItem } from '@limetech/lime-elements';\nimport translate from '../../global/translations';\nimport { detectExtension } from './extension-mapping';\nimport { Fullscreen } from './fullscreen';\nimport { FileType, OfficeViewer } from './file-viewer.types';\n\n/**\n * This is a smart component that automatically detects\n * the most common file types such as image, audio, video, and text,\n * and properly displays them in the browser.\n * The component is also capable to render the most common office files.\n *\n * :::note\n * Image files will always be contained in their containers, which means\n * they automatically increase or decrease in size to fill their containing box\n * whilst preserving their aspect-ratio.\n *\n * Text and PDF files will also always respect the width and height of the\n * container in which the `limel-file-viewer` is loaded.\n * :::\n *\n * For some file types such as text and images, the component will display a\n * download button and a button to open the file in a new browser tab.\n * This will allow users to preview the file in a fullscreen mode with the\n * browser and take advantage of for example native zooming and panning\n * functionalities.\n * @exampleComponent limel-example-file-viewer\n * @exampleComponent limel-example-file-viewer-office\n * @exampleComponent limel-example-file-viewer-filename\n * @exampleComponent limel-example-file-viewer-inbuilt-actions\n * @exampleComponent limel-example-file-viewer-custom-actions\n * @exampleComponent limel-example-file-viewer-with-picker\n * @private\n */\n\n@Component({\n    tag: 'limel-file-viewer',\n    shadow: true,\n    styleUrl: 'file-viewer.scss',\n})\nexport class FileViewer {\n    /**\n     * Link to the file\n     */\n    @Prop({ reflect: true })\n    public url: string;\n\n    /**\n     * The name of the file that must also contains its extension.\n     * This overrides the filename that the `url` ends with.\n     * Useful when the `url` does not contain the filename.\n     * When specified, the `filename` will be used as filename of\n     * the downloaded file.\n     */\n    @Prop({ reflect: true })\n    public filename?: string;\n\n    /**\n     * An optional alternative text, mainly for assistive technologies and screen readers.\n     * It is used for only image files, as an `alt` attribute.\n     * Should optimally hold a description of the image,\n     * which is also displayed on the page if the image can't be loaded for some reason.\n     */\n    @Prop({ reflect: true })\n    public alt?: string;\n\n    /**\n     * Displays a button that allows the user to view the file\n     * in fullscreen mode.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowFullscreen?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to open the file\n     * in a new browser tab.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowOpenInNewTab?: boolean = false;\n\n    /**\n     * Displays a button that allows the user to download the file.\n     * Note that due to the browser's security policies,\n     * the file should be hosted on the same domain\n     * for the download button to work properly.\n     * Not displayed for office files!\n     */\n    @Prop({ reflect: true })\n    public allowDownload?: boolean = false;\n\n    /**\n     * Defines the localization for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Defines the third-party viewer that should be used to render\n     * the content of office files, such as word processing documents,\n     * presentations, or spreadsheets.\n     */\n    @Prop({ reflect: true })\n    public officeViewer: OfficeViewer = 'microsoft-office';\n\n    /**\n     * An array of custom actions that can be displayed\n     * as an action menu on the file which is being displayed.\n     */\n    @Prop()\n    public actions: ListItem[];\n\n    /**\n     * Emitted when a custom action is selected from the action menu.\n     */\n    @Event()\n    public action: EventEmitter<ListItem>;\n\n    @Element()\n    public HostElement: HTMLLimelFileViewerElement;\n\n    private fullscreen: Fullscreen;\n\n    @State()\n    private isFullscreen: boolean = false;\n\n    @State()\n    public fileType: FileType;\n\n    constructor() {\n        this.fullscreen = new Fullscreen(this.HostElement);\n        this.fileType = detectExtension(this.filename, this.url);\n    }\n\n    public render() {\n        if (!this.isOfficeFileAccessibleViaURL) {\n            return this.renderNoFileSupportMessage();\n        }\n\n        return this.renderFileViewer();\n    }\n\n    @Watch('url')\n    protected watchUrl(newUrl: string, oldUrl: string) {\n        if (newUrl === oldUrl) {\n            return;\n        }\n\n        this.fileType = detectExtension(this.filename, this.url);\n    }\n\n    private renderFileViewer() {\n        const fileViewerFunctions = {\n            pdf: this.renderPdf,\n            image: this.renderImage,\n            video: this.renderVideo,\n            audio: this.renderAudio,\n            text: this.renderText,\n            office: this.renderOffice,\n        };\n        const fileViewerFunction =\n            fileViewerFunctions[this.fileType] ||\n            this.renderNoFileSupportMessage;\n\n        return fileViewerFunction();\n    }\n\n    private renderPdf = () => {\n        return [\n            <div class=\"action-menu-for-pdf-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <object data={this.url} type=\"application/pdf\" />,\n        ];\n    };\n\n    private renderImage = () => {\n        return [this.renderButtons(), <img src={this.url} alt={this.alt} />];\n    };\n\n    private renderVideo = () => {\n        return (\n            <video controls>\n                <source src={this.url} />\n            </video>\n        );\n    };\n\n    private renderAudio = () => {\n        return (\n            <audio controls>\n                <source src={this.url} />\n            </audio>\n        );\n    };\n\n    private renderText = () => {\n        return [\n            this.renderButtons(),\n            <object data={this.url} type=\"text/plain\" />,\n        ];\n    };\n\n    private renderOffice = () => {\n        return [\n            <div class=\"action-menu-for-office-files\">\n                {this.renderActionMenu()}\n            </div>,\n            <iframe\n                src={this.getOfficeViewerUrl() + this.url + '&embedded=true'}\n                frameborder=\"0\"\n            />,\n        ];\n    };\n\n    private isOfficeFileAccessibleViaURL = () => {\n        return (\n            this.fileType === 'office' &&\n            !(this.url.startsWith('http://') || this.url.startsWith('https://'))\n        );\n    };\n\n    private getOfficeViewerUrl = () => {\n        const officeViewers = {\n            'microsoft-office':\n                'https://view.officeapps.live.com/op/embed.aspx?src=',\n            'google-drive': 'https://docs.google.com/gview?url=',\n        };\n\n        return officeViewers[this.officeViewer];\n    };\n\n    private renderNoFileSupportMessage = () => {\n        return (\n            <div class=\"no-support\">\n                <limel-icon\n                    class=\"icon--warning\"\n                    name=\"brake_warning\"\n                    size=\"large\"\n                    role=\"presentation\"\n                />\n                <p>{this.getTranslation('message.unsupported-filetype')}</p>\n                {this.renderDownloadButton()}\n            </div>\n        );\n    };\n\n    private renderButtons = () => {\n        return (\n            <div class=\"buttons\">\n                {this.renderActionMenu()}\n                {this.renderToggleFullscreenButton()}\n                {this.renderDownloadButton()}\n                {this.renderOpenInNewTabButton()}\n            </div>\n        );\n    };\n\n    private renderToggleFullscreenButton = () => {\n        if (!this.allowFullscreen || !this.fullscreen.isSupported()) {\n            return;\n        }\n\n        const icon = this.isFullscreen ? 'multiply' : 'fit_to_width';\n        // eslint-disable-next-line multiline-ternary\n        const label = this.isFullscreen\n            ? // eslint-disable-next-line multiline-ternary\n              this.getTranslation('exit-fullscreen')\n            : this.getTranslation('open-in-fullscreen');\n\n        return [\n            <button\n                class=\"button--toggle-fullscreen\"\n                id=\"tooltip-toggle-fullscreen\"\n                role=\"button\"\n                onClick={this.handleToggleFullscreen}\n            >\n                <limel-icon name={icon} />\n                <limel-tooltip\n                    label={label}\n                    elementId=\"tooltip-toggle-fullscreen\"\n                    openDirection=\"left\"\n                />\n            </button>,\n        ];\n    };\n\n    private renderDownloadButton = () => {\n        if (!this.allowDownload || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--download\"\n                id=\"tooltip-download\"\n                role=\"button\"\n                download={this.filename ? this.filename : ''}\n                href={this.url}\n                target=\"_blank\"\n            >\n                <limel-icon name=\"download_2\" />\n                <limel-tooltip\n                    label={this.getTranslation('download')}\n                    elementId=\"tooltip-download\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderOpenInNewTabButton = () => {\n        if (!this.allowOpenInNewTab || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <a\n                class=\"button--new-tab\"\n                id=\"tooltip-new-tab\"\n                role=\"button\"\n                href={this.url}\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n            >\n                <limel-icon name=\"external_link\" />\n                <limel-tooltip\n                    label={this.getTranslation('open-in-new-tab')}\n                    elementId=\"tooltip-new-tab\"\n                    openDirection=\"left\"\n                />\n            </a>\n        );\n    };\n\n    private renderActionMenu = () => {\n        if (!this.actions || this.isFullscreen) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"action-menu\"\n                items={this.actions}\n                onSelect={this.emitOnAction}\n                open-direction=\"left\"\n            >\n                <button\n                    class=\"button--action\"\n                    id=\"tooltip-more\"\n                    role=\"button\"\n                    slot=\"trigger\"\n                >\n                    <limel-icon name=\"menu_2\" />\n                    <limel-tooltip\n                        label={this.getTranslation('more-actions')}\n                        elementId=\"tooltip-more\"\n                        openDirection=\"left\"\n                    />\n                </button>\n            </limel-menu>\n        );\n    };\n\n    private handleToggleFullscreen = () => {\n        if (this.fullscreen.isSupported()) {\n            this.fullscreen.toggle();\n            this.isFullscreen = !this.isFullscreen;\n        }\n    };\n\n    private emitOnAction = (event: CustomEvent<ListItem>) => {\n        event.stopPropagation();\n        this.action.emit(event.detail);\n    };\n\n    private getTranslation(key: string) {\n        return translate.get(`file-viewer.${key}`, this.language);\n    }\n}\n"],"version":3}

package/dist/esm/limel-file.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
-import { t as translate } from './translations-f88bb584.js';
+import { t as translate } from './translations-dea847ae.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
 import { M as MDCTextField } from './component-288691f3.js';
 import './component-410aad5a.js';

package/dist/esm/limel-flatpickr-adapter.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
-import { t as translate } from './translations-f88bb584.js';
+import { t as translate } from './translations-dea847ae.js';
 import { c as createCommonjsModule, a as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers-5ec8f9b7.js';
 import './sv-336c4576.js';
 import { m as moment } from './moment-faa8a4a8.js';

package/dist/esm/limel-icon-button.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-232e9616.js';
 import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-0473e94a.js';
+import { c as createRandomString } from './random-string-812b1c35.js';
 
 const iconButtonCss = ":host([hidden]){display:none}:host([disabled]){pointer-events:none}button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--icon-background-color, transparent);display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:2.25rem;border-radius:50%}button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button:focus{outline:none}button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host([elevated]) button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}button:disabled{color:var(--mdc-theme-text-disabled-on-background)}limel-icon{width:1.25rem}";
 
@@ -31,10 +32,16 @@ const IconButton = class {
   }
   render() {
     const buttonAttributes = {};
+    const tooltipId = createRandomString();
     if (this.host.hasAttribute('tabindex')) {
       buttonAttributes.tabindex = this.host.getAttribute('tabindex');
     }
-    return (h("button", Object.assign({ disabled: this.disabled, "aria-label": this.label, title: this.label }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true })));
+    return (h("button", Object.assign({ disabled: this.disabled, id: tooltipId }, buttonAttributes), h("limel-icon", { name: this.icon, badge: true }), this.renderTooltip(tooltipId)));
+  }
+  renderTooltip(tooltipId) {
+    if (this.label) {
+      return h("limel-tooltip", { elementId: tooltipId, label: this.label });
+    }
   }
   get host() { return getElement(this); }
 };

package/dist/esm/limel-icon-button.entry.js.map

@@ -1 +1 @@
-{"file":"limel-icon-button.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,o7BAAo7B;;MCkB77B,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACI,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB,GAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,EACX;GACL;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nbutton {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                aria-label={this.label}\n                title={this.label}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n            </button>\n        );\n    }\n}\n"],"version":3}
+{"file":"limel-icon-button.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,o7BAAo7B;;MCmB77B,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IAEvC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACI,4BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,SAAS,IACT,gBAAgB,GAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,EAC3C,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CACzB,EACX;GACL;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAO,qBAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;GACJ;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the button.\n */\n\n:host([hidden]) {\n    display: none;\n}\n\n:host([disabled]) {\n    pointer-events: none;\n}\n\nbutton {\n    all: unset;\n    @include mixins.is-flat-clickable(\n        $background-color: var(--icon-background-color, transparent)\n    );\n    @include mixins.visualize-keyboard-focus;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    height: 2.25rem;\n    width: 2.25rem;\n    border-radius: 50%;\n\n    :host([elevated]) & {\n        &:not(:hover):not(:active):not(:focus-visible) {\n            box-shadow: var(--button-shadow-normal);\n        }\n    }\n\n    &:disabled {\n        color: var(--mdc-theme-text-disabled-on-background);\n    }\n}\n\nlimel-icon {\n    width: 1.25rem;\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from 'src/util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n */\n@Component({\n    tag: 'limel-icon-button',\n    shadow: true,\n    styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n    /**\n     * The icon to display.\n     */\n    @Prop({ reflect: true })\n    public icon: string;\n\n    /**\n     * Set to `true` to give the button our standard \"elevated\" look, lifting\n     * it off the flat layout.\n     */\n    @Prop({ reflect: true })\n    public elevated = false;\n\n    /**\n     * The text to show to screenreaders and other assistive tech.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to disable the button.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    @Element()\n    private host: HTMLLimelIconButtonElement;\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n        if (!element) {\n            return;\n        }\n    }\n\n    public render() {\n        const buttonAttributes: { tabindex?: string } = {};\n        const tooltipId = createRandomString();\n\n        if (this.host.hasAttribute('tabindex')) {\n            buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n        }\n\n        return (\n            <button\n                disabled={this.disabled}\n                id={tooltipId}\n                {...buttonAttributes}\n            >\n                <limel-icon name={this.icon} badge={true} />\n                {this.renderTooltip(tooltipId)}\n            </button>\n        );\n    }\n    private renderTooltip(tooltipId) {\n        if (this.label) {\n            return <limel-tooltip elementId={tooltipId} label={this.label} />;\n        }\n    }\n}\n"],"version":3}

package/dist/esm/{limel-list_2.entry.js → limel-list.entry.js}

@@ -1,12 +1,9 @@
 import { h, r as registerInstance, c as createEvent, g as getElement, H as Host } from './index-232e9616.js';
-import { d as MDCList, s as strings, b as MDCMenuSurface, C as Corner } from './component-fffa3419.js';
+import { a as MDCList, s as strings } from './component-0be247ac.js';
 import { C as CheckboxTemplate } from './checkbox.template-c2d0fa10.js';
-import { i as isDescendant } from './dom-2fe617e7.js';
-import { E as ESCAPE, c as ESCAPE_KEY_CODE, T as TAB, b as TAB_KEY_CODE } from './keycodes-44c01beb.js';
 import './component-410aad5a.js';
 import './ponyfill-30263d5e.js';
 import './keyboard-4b9e12e3.js';
-import './util-f1bde91c.js';
 
 const RadioButtonTemplate = (props) => {
   return (h("div", { class: "mdc-form-field" },
@@ -381,122 +378,6 @@ const List = class {
 };
 List.style = listCss;
 
-const menuSurfaceCss = ":host(limel-menu-surface){display:block;max-height:inherit}.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-width:var(--mdc-menu-max-width, calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:var(--mdc-menu-max-height, calc(100vh - 32px));margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform, opacity;z-index:8;transition:opacity 0.03s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1), height 250ms cubic-bezier(0, 0, 0.2, 1);box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);background-color:#fff;background-color:var(--mdc-theme-surface, #fff);color:#000;color:var(--mdc-theme-on-surface, #000);border-radius:4px;border-radius:var(--mdc-shape-medium, 4px);transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(0.8);opacity:0}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity 0.075s linear}[dir=rtl] .mdc-menu-surface,.mdc-menu-surface[dir=rtl]{transform-origin-left:top right;transform-origin-right:top left;}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}.mdc-menu-surface--fullwidth{width:100%}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity, 0);transition:opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color, #fff)}.mdc-menu{min-width:112px;min-width:var(--mdc-menu-min-width, 112px)}.mdc-menu .mdc-deprecated-list-item__meta{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list-item__graphic{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list{color:rgba(0, 0, 0, 0.87)}.mdc-menu .mdc-deprecated-list,.mdc-menu .mdc-list{position:relative}.mdc-menu .mdc-deprecated-list .mdc-elevation-overlay,.mdc-menu .mdc-list .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-menu .mdc-deprecated-list-divider{margin:8px 0}.mdc-menu .mdc-deprecated-list-item{user-select:none}.mdc-menu .mdc-deprecated-list-item--disabled{cursor:auto}.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text,.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic{pointer-events:none}.mdc-menu__selection-group{padding:0;fill:currentColor}.mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:56px;padding-right:16px}[dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item,.mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl]{padding-left:16px;padding-right:56px;}.mdc-menu__selection-group .mdc-menu__selection-group-icon{left:16px;right:initial;display:none;position:absolute;top:50%;transform:translateY(-50%)}[dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon,.mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl]{left:initial;right:16px;}.mdc-menu-item--selected .mdc-menu__selection-group-icon{display:inline}.mdc-menu-surface{max-height:inherit;position:relative;--mdc-menu-max-width:var(\n      --menu-surface-width,\n      min(calc(100vw - 2rem), 20rem)\n  );background-color:var(--lime-elevated-surface-background-color)}:host(limel-menu-surface.has-grid-layout) .mdc-menu-surface{width:var(--menu-surface-width, min(100vw - 2rem, 40rem));max-width:unset}";
+export { List as limel_list };
 
-const MenuSurface = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.dismiss = createEvent(this, "dismiss", 7);
-    this.setup = () => {
-      const menuElement = this.host.shadowRoot.querySelector('.mdc-menu-surface');
-      if (!menuElement) {
-        return;
-      }
-      this.menuSurface = new MDCMenuSurface(menuElement);
-      this.menuSurface.setAnchorCorner(Corner.TOP_START);
-      document.addEventListener('mousedown', this.handleDocumentClick, {
-        capture: true,
-      });
-      this.host.addEventListener('keydown', this.handleKeyDown);
-      window.addEventListener('resize', this.handleResize, {
-        passive: true,
-      });
-    };
-    this.teardown = () => {
-      var _a;
-      (_a = this.menuSurface) === null || _a === void 0 ? void 0 : _a.destroy();
-      document.removeEventListener('mousedown', this.handleDocumentClick, {
-        capture: true,
-      });
-      this.host.removeEventListener('keydown', this.handleKeyDown);
-      window.removeEventListener('resize', this.handleResize);
-    };
-    this.handleDocumentClick = (event) => {
-      const elementPath = event.path || [];
-      if (!this.open) {
-        return;
-      }
-      if (isDescendant(event.target, this.host)) {
-        return;
-      }
-      if (this.allowClicksElement) {
-        const clickedInAllowedElement = elementPath.includes(this.allowClicksElement);
-        if (clickedInAllowedElement) {
-          return;
-        }
-      }
-      this.dismiss.emit();
-      this.preventClickEventPropagation();
-    };
-    this.handleResize = () => {
-      if (this.open) {
-        this.dismiss.emit();
-      }
-    };
-    this.preventClickEventPropagation = () => {
-      // When the menu surface is open, we want to stop the `click` event from propagating
-      // when clicking outside the surface itself. This is to prevent any dialog that might
-      // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,
-      // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener
-      // for `click`, so we can capture and "kill" it.
-      document.addEventListener('click', this.stopEvent, {
-        capture: true,
-        once: true,
-      });
-      // We also capture and "kill" the next `mouseup` event.
-      document.addEventListener('mouseup', this.stopEvent, {
-        capture: true,
-        once: true,
-      });
-      // If the user dragged the scrollbar, no `click` event happens. So when we get the
-      // `mouseup` event, remove the handler for `click` if it's still there.
-      // Otherwise, we would catch the next click even though the menu is no longer open.
-      document.addEventListener('mouseup', () => {
-        document.removeEventListener('click', this.stopEvent, {
-          capture: true,
-        });
-      }, {
-        once: true,
-      });
-    };
-    this.stopEvent = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-    };
-    this.handleKeyDown = (event) => {
-      const isEscape = event.key === ESCAPE || event.keyCode === ESCAPE_KEY_CODE;
-      const isTab = event.key === TAB || event.keyCode === TAB_KEY_CODE;
-      if (this.open && (isEscape || isTab)) {
-        event.stopPropagation();
-        this.dismiss.emit();
-      }
-    };
-    this.open = false;
-    this.allowClicksElement = undefined;
-  }
-  connectedCallback() {
-    this.setup();
-  }
-  disconnectedCallback() {
-    this.teardown();
-  }
-  componentDidLoad() {
-    this.setup();
-  }
-  render() {
-    const classList = {
-      'mdc-menu': true,
-      'mdc-menu-surface': true,
-      'mdc-menu-surface--open': this.open,
-      'mdc-elevation-transition': true,
-      'mdc-elevation--z4': true,
-    };
-    return (h("div", { class: classList, tabindex: "-1" }, h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
-MenuSurface.style = menuSurfaceCss;
-
-export { List as limel_list, MenuSurface as limel_menu_surface };
-
-//# sourceMappingURL=limel-list_2.entry.js.map
+//# sourceMappingURL=limel-list.entry.js.map

package/dist/esm/limel-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-list.entry.js","mappings":"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","names":["listStrings"],"sources":["./src/components/list/radio-button/radio-button.template.tsx","./src/components/list/list-renderer.tsx","./src/components/list/list.scss?tag=limel-list&encapsulation=shadow","./src/components/list/list.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div class=\"mdc-form-field\">\n            <div\n                class={`\n                        mdc-radio\n                        ${props.disabled ? 'mdc-radio--disabled' : ''}\n                    `}\n            >\n                <input\n                    class=\"mdc-radio__native-control\"\n                    type=\"radio\"\n                    id={props.id}\n                    checked={props.checked}\n                    disabled={props.disabled}\n                    onChange={props.onChange}\n                />\n                <div class=\"mdc-radio__background\">\n                    <div class=\"mdc-radio__outer-circle\" />\n                    <div class=\"mdc-radio__inner-circle\" />\n                </div>\n            </div>\n            <label\n                class={`${props.disabled ? 'disabled' : ''}`}\n                htmlFor={props.id}\n            >\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","import { ListItem, ListSeparator, MenuItem } from '../../interface';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\n\nexport class ListRenderer {\n    private defaultConfig: ListRendererConfig = {\n        isOpen: true,\n        badgeIcons: false,\n    };\n\n    private config: ListRendererConfig;\n\n    private hasIcons: boolean;\n    private twoLines: boolean;\n    private avatarList: boolean;\n    private commandKey: boolean;\n\n    private applyTabIndexToItemAtIndex: number;\n\n    public render(\n        items: Array<ListItem | ListSeparator>,\n        config: ListRendererConfig = {}\n    ) {\n        items = items || [];\n        this.config = { ...this.defaultConfig, ...config };\n\n        this.twoLines = items.some((item) => {\n            return 'secondaryText' in item && !!item.secondaryText;\n        });\n\n        this.hasIcons = items.some((item) => {\n            return 'icon' in item && !!item.icon;\n        });\n\n        this.avatarList = this.config.badgeIcons && this.hasIcons;\n        const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n        let role;\n        switch (this.config.type) {\n            case 'checkbox':\n                role = 'group';\n                break;\n            case 'radio':\n                role = 'radiogroup';\n                break;\n            default:\n                role = 'listbox';\n        }\n\n        this.applyTabIndexToItemAtIndex =\n            this.getIndexForWhichToApplyTabIndex(items);\n\n        const classNames = {\n            'mdc-deprecated-list': true,\n            'mdc-deprecated-list--two-line': this.twoLines,\n            selectable: selectableListTypes.includes(this.config.type),\n            'mdc-deprecated-list--avatar-list': this.avatarList,\n            'list--compact':\n                this.twoLines &&\n                this.commandKey &&\n                ['small', 'x-small'].includes(this.config.iconSize),\n        };\n\n        return (\n            <ul class={classNames} role={role} aria-orientation=\"vertical\">\n                {items.map(this.renderListItem)}\n            </ul>\n        );\n    }\n\n    /**\n     * Determine which ListItem should have the `tab-index` attribute set,\n     * and return the index at which that ListItem is located in `items`.\n     * Returns `undefined` if no item should have the attribute set.\n     * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n     * @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s\n     * @returns {number} the index as per the description\n     */\n    private getIndexForWhichToApplyTabIndex = (\n        items: Array<ListItem | ListSeparator>\n    ) => {\n        let result;\n        for (let i = 0, max = items.length; i < max; i += 1) {\n            if ('separator' in items[i]) {\n                // Ignore ListSeparator\n            } else {\n                const item = items[i] as ListItem<any>;\n                if (item.selected) {\n                    result = i;\n                    break;\n                }\n\n                if (result === undefined && !item.disabled) {\n                    result = i;\n                    // Do NOT break, as any later item with\n                    // `selected=true` should get the tab-index instead!\n                }\n            }\n        }\n\n        return result;\n    };\n\n    /**\n     * Render a single list item\n     * @param {ListItem | ListSeparator} item the item to render\n     * @param {number} index the index the item had in the `items` array\n     * @returns {HTMLElement} the list item\n     */\n    private renderListItem = (\n        item: ListItem | ListSeparator,\n        index: number\n    ) => {\n        if ('separator' in item) {\n            return (\n                <li class=\"mdc-deprecated-list-divider\" role=\"separator\">\n                    {this.rendertext(item)}\n                    <div class=\"limel-list-divider-line\" />\n                </li>\n            );\n        }\n\n        if (['radio', 'checkbox'].includes(this.config.type)) {\n            return this.renderVariantListItem(this.config, item, index);\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item--selected': item.selected,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                aria-selected={item.selected ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {item.icon ? this.renderIcon(this.config, item) : null}\n                {this.getPrimaryComponent(item)}\n                {this.renderText(item)}\n                {this.twoLines && this.avatarList ? this.renderDivider() : null}\n                {this.renderActionMenu(item.actions)}\n            </li>\n        );\n    };\n\n    private rendertext = (item: ListSeparator) => {\n        if ('text' in item) {\n            return <h2 class=\"limel-list-divider-title\">{item.text}</h2>;\n        }\n    };\n\n    private getPrimaryComponent(item: ListItem): Element {\n        if (!this.hasPrimaryComponent(item)) {\n            return;\n        }\n\n        const PrimaryComponent = item.primaryComponent.name;\n        const props = item.primaryComponent.props;\n\n        return <PrimaryComponent {...props} />;\n    }\n\n    private hasPrimaryComponent = (item: ListItem) => {\n        return !!item?.primaryComponent?.name;\n    };\n\n    /**\n     * Render the text of the list item\n     * @param {ListItem} item the list item\n     * @returns {HTMLElement | string} the text for the list item\n     */\n    private renderText = (item: ListItem) => {\n        if (this.isSimpleItem(item)) {\n            return (\n                <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n            );\n        }\n\n        return (\n            <div class=\"mdc-deprecated-list-item__text\">\n                <div class=\"mdc-deprecated-list-item__primary-command-text\">\n                    <div class=\"mdc-deprecated-list-item__primary-text\">\n                        {item.text}\n                    </div>\n                </div>\n                <div class=\"mdc-deprecated-list-item__secondary-text\">\n                    {item.secondaryText}\n                </div>\n            </div>\n        );\n    };\n\n    private isSimpleItem = (item: ListItem): boolean => {\n        return !('secondaryText' in item);\n    };\n\n    /**\n     * Render an icon for a list item\n     * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function\n     * @param {ListItem} item the list item\n     * @returns {HTMLElement} the icon element\n     */\n    private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n        const style: any = {};\n        if (item.iconColor) {\n            if (config.badgeIcons) {\n                style['--icon-background-color'] = item.iconColor;\n            } else {\n                style.color = item.iconColor;\n            }\n        }\n\n        return (\n            <limel-icon\n                badge={config.badgeIcons}\n                class=\"mdc-deprecated-list-item__graphic\"\n                name={item.icon}\n                style={style}\n                size={config.iconSize}\n            />\n        );\n    };\n\n    private renderDivider = () => {\n        const classes = {\n            'mdc-deprecated-list-divider': true,\n            'mdc-deprecated-list-divider--inset': true,\n        };\n        if (this.config.iconSize) {\n            classes[this.config.iconSize] = true;\n        }\n\n        return <hr class={classes} />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={actions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                />\n            </limel-menu>\n        );\n    };\n\n    private renderVariantListItem = (\n        config: ListRendererConfig,\n        item: ListItem,\n        index: number\n    ) => {\n        let itemTemplate;\n        if (config.type === 'radio') {\n            itemTemplate = (\n                <RadioButtonTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        } else if (config.type === 'checkbox') {\n            itemTemplate = (\n                <CheckboxTemplate\n                    id={`c_${index}`}\n                    checked={item.selected}\n                    disabled={item.disabled}\n                />\n            );\n        }\n\n        const classNames = {\n            'mdc-deprecated-list-item': true,\n            'mdc-deprecated-list-item--disabled': item.disabled,\n            'mdc-deprecated-list-item__text': !item.secondaryText,\n            'has-primary-component': this.hasPrimaryComponent(item),\n        };\n\n        const attributes: { tabindex?: string } = {};\n        if (index === this.applyTabIndexToItemAtIndex) {\n            attributes.tabindex = '0';\n        }\n\n        return (\n            <li\n                class={classNames}\n                role={config.type}\n                aria-checked={item.selected ? 'true' : 'false'}\n                aria-disabled={item.disabled ? 'true' : 'false'}\n                data-index={index}\n                {...attributes}\n            >\n                {this.renderVariantListItemContent(config, item, itemTemplate)}\n            </li>\n        );\n    };\n\n    private renderVariantListItemContent = (\n        config: ListRendererConfig,\n        item: ListItem,\n        itemTemplate: any\n    ) => {\n        if (this.hasIcons) {\n            return [\n                item.icon ? this.renderIcon(config, item) : null,\n                this.getPrimaryComponent(item),\n                this.renderText(item),\n                <div class=\"mdc-deprecated-list-item__meta\">\n                    {itemTemplate}\n                </div>,\n            ];\n        }\n\n        return [\n            <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n            this.getPrimaryComponent(item),\n            this.renderText(item),\n        ];\n    };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n@use '../checkbox/checkbox.scss';\n\n@use '@material/list';\n\n$list-border-radius: 0.375rem; // 6px\n$list--has-interactive-items--mdc-list-item--hover: 1;\n$list-static-actions-list: 1;\n$list-mdc-list-item: 0;\n\n/**\n * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.\n * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.\n * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.\n * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.\n * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.\n * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.\n * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.\n * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.\n * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;\n */\n\n:host(limel-list) {\n    display: block;\n    isolation: isolate;\n    @include checkbox.custom-checkbox-styles;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n@include list.deprecated-core-styles;\n\n.mdc-deprecated-list {\n    --mdc-theme-text-icon-on-background: var(\n        --icon-color,\n        rgb(var(--contrast-900))\n    );\n    margin: var(\n        --list-margin,\n        0.25rem\n    ); // added space to visualize keyboard-focused items\n    padding: 0;\n    border-radius: $list-border-radius;\n\n    .mdc-deprecated-list-divider {\n        border-bottom-color: transparent;\n        display: flex;\n        align-items: center;\n        gap: 0.75rem;\n        height: auto;\n        padding: 0 0.5rem;\n    }\n\n    .limel-list-divider-line {\n        background-color: rgb(var(--contrast-400));\n        height: 0.125rem;\n        border-radius: 1rem;\n        min-width: 1rem;\n        flex-grow: 1;\n    }\n\n    .limel-list-divider-title {\n        all: unset;\n        @include mixins.truncate-text;\n        color: rgb(var(--contrast-900));\n        font-size: 0.8125rem; // 13px\n    }\n\n    .mdc-deprecated-list-item {\n        transition: background-color 0.2s ease;\n        box-sizing: border-box;\n        z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12\n\n        &:not(.mdc-deprecated-list-item--disabled) {\n            &:hover {\n                background-color: rgb(var(--contrast-300));\n                z-index: 1;\n            }\n        }\n\n        &.mdc-deprecated-list-item--disabled {\n            cursor: not-allowed;\n\n            limel-icon {\n                opacity: 0.38; // similar to `mdc-deprecated-list-item__text` when disabled\n            }\n        }\n\n        &:first-child {\n            border-top-left-radius: $list-border-radius;\n            border-top-right-radius: $list-border-radius;\n        }\n        &:last-child {\n            border-bottom-right-radius: $list-border-radius;\n            border-bottom-left-radius: $list-border-radius;\n        }\n    }\n\n    &.selectable\n        .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {\n        cursor: pointer;\n    }\n\n    .mdc-deprecated-list-item__meta {\n        // the action menu on the right side a list item\n        line-height: 100%;\n        margin-right: -0.5rem;\n    }\n\n    .mdc-deprecated-list-item__graphic {\n        margin-right: functions.pxToRem(8);\n    }\n\n    &.mdc-deprecated-list--avatar-list {\n        position: relative;\n\n        limel-icon.mdc-deprecated-list-item__graphic {\n            background-color: var(\n                --icon-background-color,\n                rgb(var(--contrast-900))\n            );\n            color: var(--icon-color, rgba(var(--color-white), 0.88));\n            margin-right: functions.pxToRem(12);\n            margin-left: functions.pxToRem(-4);\n        }\n\n        hr.mdc-deprecated-list-divider {\n            position: absolute;\n            bottom: 0;\n\n            &.mdc-deprecated-list-divider--inset {\n                --icon-width: #{functions.pxToRem(40)};\n                --icon-right-padding: #{functions.pxToRem(12)};\n                --list-right-padding: #{functions.pxToRem(12)};\n                right: 0;\n                width: calc(\n                    100% - var(--icon-width) - var(--icon-right-padding) -\n                        var(--list-right-padding)\n                );\n\n                &.x-small {\n                    --icon-width: #{functions.pxToRem(24)};\n                }\n\n                &.small {\n                    --icon-width: #{functions.pxToRem(32)};\n                }\n\n                &.medium {\n                    --icon-width: #{functions.pxToRem(40)};\n                }\n\n                &.large {\n                    --icon-width: #{functions.pxToRem(48)};\n                }\n            }\n        }\n\n        .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {\n            display: none;\n        }\n    }\n\n    &.mdc-deprecated-list--two-line {\n        .mdc-deprecated-list-item__text {\n            padding-top: functions.pxToRem(8);\n            padding-bottom: functions.pxToRem(8);\n        }\n        .mdc-deprecated-list-item__primary-text {\n            margin-bottom: functions.pxToRem(4);\n        }\n    }\n\n    .mdc-deprecated-list-item__secondary-text,\n    .mdc-deprecated-list-item__primary-text,\n    .mdc-deprecated-list-item__command-text {\n        margin: 0;\n        &:before,\n        &:after {\n            display: none;\n        }\n    }\n\n    .mdc-deprecated-list-item__command-text {\n        color: rgb(var(--contrast-800));\n        margin-left: 0.7rem;\n    }\n\n    .mdc-deprecated-list-item__text {\n        align-self: center;\n        width: 100%;\n    }\n\n    .has-primary-component {\n        .mdc-deprecated-list-item__text {\n            margin-left: 0.5rem;\n        }\n    }\n    .mdc-deprecated-list-item__primary-command-text {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: baseline;\n    }\n\n    // Tweaks to display the icon correctly in Edge\n    limel-icon.mdc-deprecated-list-item__graphic {\n        display: block;\n    }\n}\n\n.mdc-deprecated-list:not(.mdc-deprecated-list--avatar-list) {\n    limel-icon.mdc-deprecated-list-item__graphic {\n        // Tweaks to make icon lists align nicely with badge-icon lists.\n        &[size='x-small'] {\n            margin-right: functions.pxToRem(4);\n        }\n        &[size='small'] {\n            margin-right: functions.pxToRem(8);\n        }\n        &[size='medium'] {\n            margin-right: functions.pxToRem(8);\n        }\n        &[size='large'] {\n            margin-right: functions.pxToRem(12);\n        }\n    }\n}\n\n.mdc-deprecated-list-item.mdc-deprecated-list-item--selected {\n    &:before {\n        background-color: var(--mdc-theme-primary);\n        opacity: 0.15;\n    }\n}\n\n:not(.mdc-deprecated-list--non-interactive) {\n    > {\n        :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n            @include mixins.visualize-keyboard-focus;\n\n            &:focus-visible {\n                border-radius: $list-border-radius;\n                z-index: $list--has-interactive-items--mdc-list-item--hover;\n            }\n        }\n    }\n}\n\n@import '../checkbox/checkbox.scss';\n\n@import './radio-button/radio-button.scss';\n\n@import './partial-styles/custom-styles.scss';\n@import './partial-styles/enable-multiline-text.scss';\n@import './partial-styles/_has-grid-layout.scss';\n@import './partial-styles/_static-actions.scss';\n","import { IconSize, ListItem, ListSeparator, ListType } from '../../interface';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/**\n * @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-separator\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n */\n@Component({\n    tag: 'limel-list',\n    shadow: true,\n    styleUrl: 'list.scss',\n})\nexport class List {\n    /**\n     * List of items to display\n     */\n    @Prop()\n    public items: Array<ListItem | ListSeparator>;\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop()\n    public badgeIcons: boolean;\n\n    /**\n     * Size of the icons in the list\n     */\n    @Prop()\n    public iconSize: IconSize = 'small';\n\n    /**\n     * The type of the list, omit to get a regular list. Available types are:\n     * `selectable`: regular list with single selection.\n     * `radio`: radio button list with single selection.\n     * `checkbox`: checkbox list with multiple selection.\n     */\n    @Prop()\n    public type: ListType;\n\n    /**\n     * By default, lists will display 3 lines of text, and then truncate the rest.\n     * Consumers can increase or decrease this number by specifying\n     * `maxLinesSecondaryText`. If consumer enters zero or negative\n     * numbers we default to 1; and if they type decimals we round up.\n     */\n    // eslint-disable-next-line no-magic-numbers\n    @Prop() maxLinesSecondaryText: number = 3;\n\n    @Element()\n    private element: HTMLLimelListElement;\n\n    private config: ListRendererConfig;\n    private listRenderer = new ListRenderer();\n    private mdcList: MDCList;\n    private multiple: boolean;\n    private selectable: boolean;\n\n    /**\n     * Fired when a new value has been selected from the list.\n     * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n     */\n    @Event()\n    private change: EventEmitter<ListItem | ListItem[]>;\n\n    /**\n     * Fired when an action has been selected from the action menu of a list item\n     */\n    @Event()\n    protected select: EventEmitter<ListItem | ListItem[]>;\n\n    public connectedCallback() {\n        this.setup();\n    }\n\n    public disconnectedCallback() {\n        this.teardown();\n    }\n\n    public componentDidLoad() {\n        this.setup();\n    }\n\n    public render() {\n        this.config = {\n            badgeIcons: this.badgeIcons,\n            type: this.type,\n            iconSize: this.iconSize,\n        };\n        let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n        if (this.maxLinesSecondaryText < 1) {\n            maxLinesSecondaryText = 1;\n        }\n\n        const html = this.listRenderer.render(this.items, this.config);\n\n        return (\n            <Host\n                style={{\n                    '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n                }}\n            >\n                {html}\n            </Host>\n        );\n    }\n\n    @Watch('type')\n    protected handleType() {\n        this.setupListeners();\n    }\n\n    @Watch('items')\n    protected itemsChanged() {\n        if (!this.mdcList) {\n            return;\n        }\n\n        setTimeout(() => {\n            this.setup();\n\n            const listItems = this.items.filter(this.isListItem);\n\n            if (this.multiple) {\n                this.mdcList.selectedIndex = listItems\n                    .filter((item: ListItem) => item.selected)\n                    .map((item: ListItem) => listItems.indexOf(item));\n            } else {\n                const selectedIndex = listItems.findIndex(\n                    (item: ListItem) => item.selected\n                );\n\n                if (selectedIndex === -1) {\n                    this.mdcList.initializeListType();\n                } else {\n                    this.mdcList.selectedIndex = selectedIndex;\n                }\n            }\n        }, 0);\n    }\n\n    private setup = () => {\n        this.setupList();\n\n        this.setupListeners();\n    };\n\n    private setupList = () => {\n        if (this.mdcList) {\n            this.teardown();\n            this.mdcList = null;\n        }\n\n        const element = this.element.shadowRoot.querySelector(\n            '.mdc-deprecated-list'\n        );\n        if (!element) {\n            return;\n        }\n\n        this.mdcList = new MDCList(element);\n        this.mdcList.hasTypeahead = true;\n    };\n\n    private setupListeners = () => {\n        if (!this.mdcList) {\n            return;\n        }\n\n        this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n        this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n            this.type\n        );\n        this.multiple = this.type === 'checkbox';\n\n        if (!this.selectable) {\n            return;\n        }\n\n        this.mdcList.listen(ACTION_EVENT, this.handleAction);\n        this.mdcList.singleSelection = !this.multiple;\n    };\n\n    private teardown = () => {\n        this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n        this.mdcList?.destroy();\n    };\n\n    private handleAction = (event: MDCListActionEvent) => {\n        if (!this.multiple) {\n            this.handleSingleSelect(event.detail.index);\n\n            return;\n        }\n\n        this.handleMultiSelect(event.detail.index);\n    };\n\n    private handleSingleSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItem: ListItem = listItems.find((item: ListItem) => {\n            return !!item.selected;\n        });\n\n        if (selectedItem) {\n            this.change.emit({ ...selectedItem, selected: false });\n        }\n\n        if (listItems[index] !== selectedItem) {\n            this.change.emit({ ...listItems[index], selected: true });\n        }\n    };\n\n    private handleMultiSelect = (index: number) => {\n        const listItems = this.items.filter(this.isListItem) as ListItem[];\n        if (listItems[index].disabled) {\n            return;\n        }\n\n        const selectedItems: ListItem[] = listItems\n            .filter((item: ListItem, listIndex: number) => {\n                if (listIndex === index) {\n                    // This is the item that was selected or deselected,\n                    // so we negate its previous selection status.\n                    return !item.selected;\n                }\n\n                // This is an item that didn't change, so we keep its selection status.\n                return item.selected;\n            })\n            .map((item: ListItem) => {\n                return { ...item, selected: true };\n            });\n\n        this.change.emit(selectedItems);\n    };\n\n    private isListItem = (item: ListItem): boolean => {\n        return !('separator' in item);\n    };\n}\n"],"version":3}