@limetech/lime-elements 38.19.1 → 38.19.2

package/dist/types/global/shared-types/file.types.d.ts

@@ -1,5 +1,7 @@
+import { MenuItem } from '../../components';
 import { Icon } from '../../global/shared-types/icon.types';
 import { Color } from './color.types';
+import { ListSeparator } from './separator.types';
 /**
  * @public
  */
@@ -70,5 +72,9 @@ export interface FileInfo {
    * be left undefined or set to `null`.
    */
   href?: string;
+  /**
+   * Custom menu items for the file.
+   */
+  menuItems?: Array<MenuItem | ListSeparator>;
 }
 //# sourceMappingURL=file.types.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.19.1",
+  "version": "38.19.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/collection/style/internal/variables.scss

@@ -1,10 +0,0 @@
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly used by outside code.
- */
-
-@use '../functions';
-
-$lime-banner-height: functions.pxToRem(52) !default;

package/dist/lime-elements/p-d66c17aa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fileCss","DEFAULT_FILE_CHIP","id","text","removable","File","this","dropZoneTip","getTranslation","handleNewFiles","event","preventAndStop","change","emit","detail","handleChipSetChange","stopPropagation","file","length","handleChipInteract","interact","render","h","disabled","readonly","value","accept","onFilesSelected","renderChipset","renderDragAndDropTip","class","role","label","getChipArray","filename","icon","name","getFileIcon","title","getFileExtensionTitle","color","getFileColor","backgroundColor","getFileBackgroundColor","href","chipset","invalid","leadingIcon","language","onChange","onInteract","required","type","preventDefault","key","translate","get"],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/**\n * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n */\n\n:host(limel-file) {\n    position: relative;\n}\n\n.drag-and-drop-tip {\n    pointer-events: none;\n    position: absolute;\n    box-sizing: border-box;\n    margin: 0.25rem;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    flex-wrap: nowrap;\n\n    border-radius: 0.25rem;\n    border: 1px dashed rgb(var(--contrast-700));\n\n    padding: 0 0.5rem;\n\n    .invisible-label-mock {\n        flex-shrink: 0;\n        opacity: 0;\n        padding-right: 1rem;\n        padding-left: 1.5rem;\n    }\n\n    .tip {\n        font-size: smaller;\n        color: var(--mdc-theme-text-secondary-on-background);\n\n        // Below tries to render text in two lines,\n        // and then truncate if there is no more space\n        height: auto;\n        max-height: 3rem;\n        line-height: 1;\n        @include mixins.truncate-text-on-line(2);\n    }\n}\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    public render() {\n        return [\n            <limel-file-dropzone\n                disabled={this.disabled || this.readonly || !!this.value}\n                accept={this.accept}\n                onFilesSelected={this.handleNewFiles}\n            >\n                {this.renderChipset()}\n            </limel-file-dropzone>,\n            this.renderDragAndDropTip(),\n        ];\n    }\n\n    private renderDragAndDropTip() {\n        if (this.value || this.disabled || this.readonly) {\n            return;\n        }\n\n        return (\n            <div class=\"drag-and-drop-tip\">\n                <span class=\"invisible-label-mock\" role=\"presentation\">\n                    {this.label}\n                </span>\n                <span class=\"tip\">{this.dropZoneTip()}</span>\n            </div>\n        );\n    }\n\n    private dropZoneTip = (): string => {\n        return this.getTranslation('file.drag-and-drop-tips');\n    };\n\n    private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n        this.preventAndStop(event);\n        this.change.emit(event.detail[0]);\n    };\n\n    private getChipArray(): Chip[] {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n            },\n        ];\n    }\n\n    private renderChipset() {\n        const chipset = (\n            <limel-chip-set\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onInteract={this.handleChipInteract}\n                required={this.required}\n                type=\"input\"\n                value={this.getChipArray()}\n            />\n        );\n\n        if (this.value) {\n            return chipset;\n        }\n\n        return (\n            <limel-file-input\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            >\n                {chipset}\n            </limel-file-input>\n        );\n    }\n\n    private handleChipSetChange = (event: CustomEvent) => {\n        event.stopPropagation();\n        const file = event.detail.length === 0 ? event.detail[0] : null;\n        if (!file) {\n            this.change.emit(file);\n        }\n    };\n\n    private handleChipInteract = (event: CustomEvent<Chip>) => {\n        this.preventAndStop(event);\n        this.interact.emit(event.detail.id);\n    };\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(key, this.language);\n    }\n}\n"],"mappings":"uKAAA,MAAMA,EAAU,kpBCYhB,MAAMC,EAA0B,CAC5BC,GAAI,KACJC,KAAM,KACNC,UAAW,M,MA0CFC,EAAI,M,2FA2FLC,KAAAC,YAAc,IACXD,KAAKE,eAAe,2BAGvBF,KAAAG,eAAkBC,IACtBJ,KAAKK,eAAeD,GACpBJ,KAAKM,OAAOC,KAAKH,EAAMI,OAAO,GAAG,EAuD7BR,KAAAS,oBAAuBL,IAC3BA,EAAMM,kBACN,MAAMC,EAAOP,EAAMI,OAAOI,SAAW,EAAIR,EAAMI,OAAO,GAAK,KAC3D,IAAKG,EAAM,CACPX,KAAKM,OAAOC,KAAKI,E,GAIjBX,KAAAa,mBAAsBT,IAC1BJ,KAAKK,eAAeD,GACpBJ,KAAKc,SAASP,KAAKH,EAAMI,OAAOZ,GAAG,E,wDAjJZ,M,cAMA,M,cAOA,M,aAOV,M,YAMO,I,cAMK,I,CActBmB,SACH,MAAO,CACHC,EAAA,uBACIC,SAAUjB,KAAKiB,UAAYjB,KAAKkB,YAAclB,KAAKmB,MACnDC,OAAQpB,KAAKoB,OACbC,gBAAiBrB,KAAKG,gBAErBH,KAAKsB,iBAEVtB,KAAKuB,uB,CAILA,uBACJ,GAAIvB,KAAKmB,OAASnB,KAAKiB,UAAYjB,KAAKkB,SAAU,CAC9C,M,CAGJ,OACIF,EAAA,OAAKQ,MAAM,qBACPR,EAAA,QAAMQ,MAAM,uBAAuBC,KAAK,gBACnCzB,KAAK0B,OAEVV,EAAA,QAAMQ,MAAM,OAAOxB,KAAKC,e,CAc5B0B,eACJ,IAAK3B,KAAKmB,MAAO,CACb,MAAO,E,CAGX,MAAO,C,+BAEIxB,GAAiB,CACpBE,KAAMG,KAAKmB,MAAMS,SACjBhC,GAAII,KAAKmB,MAAMvB,GACfiC,KAAM,CACFC,KAAMC,EAAY/B,KAAKmB,OACvBa,MAAOC,EAAsBjC,KAAKmB,OAClCe,MAAOC,EAAanC,KAAKmB,OACzBiB,gBAAiBC,EAAuBrC,KAAKmB,QAEjDmB,KAAMtC,KAAKmB,MAAMmB,O,CAKrBhB,gBACJ,MAAMiB,EACFvB,EAAA,kBACIC,SAAUjB,KAAKiB,SACfC,SAAUlB,KAAKkB,SACfsB,QAASxC,KAAKwC,QACdd,MAAO1B,KAAK0B,MACZe,YAAY,kBACZC,SAAU1C,KAAK0C,SACfC,SAAU3C,KAAKS,oBACfmC,WAAY5C,KAAKa,mBACjBgC,SAAU7C,KAAK6C,SACfC,KAAK,QACL3B,MAAOnB,KAAK2B,iBAIpB,GAAI3B,KAAKmB,MAAO,CACZ,OAAOoB,C,CAGX,OACIvB,EAAA,oBACII,OAAQpB,KAAKoB,OACbH,SAAUjB,KAAKiB,UAAYjB,KAAKkB,UAE/BqB,E,CAkBLlC,eAAeD,GACnBA,EAAMM,kBACNN,EAAM2C,gB,CAGF7C,eAAe8C,GACnB,OAAOC,EAAUC,IAAIF,EAAKhD,KAAK0C,S"}

package/dist/lime-elements/style/internal/variables.scss

@@ -1,10 +0,0 @@
-/*
- * This file is imported into every component!
- *
- * Nothing in this file may output any CSS
- * without being explicitly used by outside code.
- */
-
-@use '../functions';
-
-$lime-banner-height: functions.pxToRem(52) !default;