npm - @nextcloud/vue - Versions diffs - 8.8.1 → 8.9.0 - Mend

@nextcloud/vue 8.8.1 → 8.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (580) hide show

package/dist/Components/NcInputField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcInputField.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n -\n - @author Marco Ambrosini <marcoambrosini@pm.me>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\" :class=\"{ 'input-field--disabled': disabled }\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--trailing-icon': showTrailingButton \|\| hasTrailingIcon,\n\t\t\t\t\t\t'input-field__input--leading-icon': hasLeadingIcon,\n\t\t\t\t\t\t'input-field__input--label-outside': labelOutside,\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t\t'input-field__input--pill': pill,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"value.toString()\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__label--trailing-icon': showTrailingButton \|\| hasTrailingIcon,\n\t\t\t\t\t'input-field__label--leading-icon': hasLeadingIcon,\n\t\t\t\t}]\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"hasLeadingIcon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- Leading material design icon in the text field, set the size to 18 -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__trailing-button--pill': pill,\n\t\t\t\t}]\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success \|\| error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/*\n\t\t The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n\t\t /\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The type of the input element\n\t\t /\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t \n\t\t Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Controls whether to display the trailing button.\n\t\t /\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Label of the trailing button\n\t\t \n\t\t Required when showTrailingButton is set\n\t\t /\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t /\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t\t'trailing-button-click',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasLeadingIcon() {\n\t\t\treturn this.$slots.default\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', this.type === 'number' && typeof this.value === 'number' ? parseFloat(event.target.value, 10) : event.target.value)\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: var(--default-clickable-area) !important;\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t// Center text if external label is used\n\t\t&--label-outside {\n\t\t\tpadding-block: 0;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: 2px solid var(--color-main-text) !important;\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--pill {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tmargin-inline-end: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: 41px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\t&--leading {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t&--pill.button-vue {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","AlertCircle","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":"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"}
1	+ {"version":3,"file":"NcInputField.mjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n -\n - @author Marco Ambrosini <marcoambrosini@pm.me>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\" :class=\"{ 'input-field--disabled': disabled }\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--trailing-icon': showTrailingButton \|\| hasTrailingIcon,\n\t\t\t\t\t\t'input-field__input--leading-icon': hasLeadingIcon,\n\t\t\t\t\t\t'input-field__input--label-outside': labelOutside,\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t\t'input-field__input--pill': pill,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"value.toString()\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__label--trailing-icon': showTrailingButton \|\| hasTrailingIcon,\n\t\t\t\t\t'input-field__label--leading-icon': hasLeadingIcon,\n\t\t\t\t}]\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"hasLeadingIcon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- Leading material design icon in the text field, set the size to 18 -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__trailing-button--pill': pill,\n\t\t\t\t}]\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success \|\| error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/*\n\t\t The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n\t\t /\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\trequired: true,\n\t\t},\n\n\t\t/\n\t\t The type of the input element\n\t\t /\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/\n\t\t The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t \n\t\t Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t /\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t /\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t /\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Controls whether to display the trailing button.\n\t\t /\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Label of the trailing button\n\t\t \n\t\t Required when showTrailingButton is set\n\t\t /\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t /\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Additional helper text message\n\t\t \n\t\t This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t /\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Disable the input field\n\t\t /\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t /\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t /\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t\t'trailing-button-click',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasLeadingIcon() {\n\t\t\treturn this.$slots.default\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label \|\| this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') \|\| null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/\n\t\t Focus the input element\n\t\t \n\t\t @public\n\t\t /\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/\n\t\t Select all the text in the input\n\t\t \n\t\t @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', this.type === 'number' && typeof this.value === 'number' ? parseFloat(event.target.value, 10) : event.target.value)\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: var(--default-clickable-area) !important;\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t// Center text if external label is used\n\t\t&--label-outside {\n\t\t\tpadding-block: 0;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: 2px solid var(--color-main-text) !important;\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--pill {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tmargin-inline-end: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: 41px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\t&--leading {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t&--pill.button-vue {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","AlertCircle","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":"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"}

package/dist/Components/NcListItem.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
 "use strict";
-const t = require("../chunks/NcListItem-y9KnglaX.cjs");
+const t = require("../chunks/NcListItem-wxqWqs4s.cjs");
 module.exports = t.NcListItem;

package/dist/Components/NcListItem.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as f } from "../chunks/NcListItem-JO4s1J8T.mjs";
+import { N as f } from "../chunks/NcListItem-C5oWvAZQ.mjs";
 export {
   f as default
 };

package/dist/Components/NcListItemIcon.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
 "use strict";
-const t = require("../chunks/NcListItemIcon-JWu3t5En.cjs");
+const t = require("../chunks/NcListItemIcon-DfdkSCin.cjs");
 module.exports = t.NcListItemIcon;

package/dist/Components/NcListItemIcon.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-import { N as f } from "../chunks/NcListItemIcon-NPSUuwgH.mjs";
+import { N as f } from "../chunks/NcListItemIcon-WH9TUCxb.mjs";
 export {
   f as default
 };

package/dist/Components/NcLoadingIcon.cjs CHANGED Viewed

@@ -1,6 +1,6 @@
-require('../assets/NcLoadingIcon-hZn7TJM8.css');
+require('../assets/NcLoadingIcon-CFmftMkz.css');
 "use strict";
-const t = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), n = {
+const t = require("../chunks/_plugin-vue2_normalizer-GXKvuwrq.cjs"), n = {
   name: "NcLoadingIcon",
   props: {
     /**

package/dist/Components/NcLoadingIcon.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-import '../assets/NcLoadingIcon-hZn7TJM8.css';
-import { n as t } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
+import '../assets/NcLoadingIcon-CFmftMkz.css';
+import { n as t } from "../chunks/_plugin-vue2_normalizer-Bj5bLKV4.mjs";
 const n = {
   name: "NcLoadingIcon",
   props: {

package/dist/Components/NcModal.cjs CHANGED Viewed

@@ -1,9 +1,9 @@
-require('../assets/NcModal-sIK5sUoC.css');
+require('../assets/NcModal-CwgrmxSg.css');
 "use strict";
-const u = require("../chunks/ScopeComponent-ad_Jva5z.cjs"), r = require("../chunks/focusTrap-n3H52LOw.cjs"), i = require("../chunks/_l10n-qu3Uu6RR.cjs"), d = require("../chunks/GenRandomId-ULxaMkkr.cjs"), h = require("../chunks/NcActions-tPPh2p8F.cjs"), p = require("./NcButton.cjs");
+const u = require("../chunks/ScopeComponent-CSd5rNUA.cjs"), r = require("../chunks/focusTrap-xauhLvvr.cjs"), i = require("../chunks/_l10n-B986q8RC.cjs"), d = require("../chunks/GenRandomId-B2O1GMbH.cjs"), h = require("../chunks/NcActions-Dfkog_G0.cjs"), p = require("./NcButton.cjs");
 require("../Directives/Tooltip.cjs");
-const l = require("../chunks/_plugin-vue2_normalizer-DCfUPqga.cjs"), f = require("../chunks/ChevronRight-MdQC55Yq.cjs"), m = require("../chunks/Close-dotk0707.cjs"), _ = require("focus-trap"), y = require("@vueuse/core"), w = require("floating-vue");
-i.register(i.t16, i.t29);
+const l = require("../chunks/_plugin-vue2_normalizer-GXKvuwrq.cjs"), f = require("../chunks/ChevronRight-BAJhNawb.cjs"), m = require("../chunks/Close-DBfrdXMw.cjs"), _ = require("focus-trap"), y = require("@vueuse/core"), w = require("floating-vue");
+i.register(i.t16, i.t30);
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *
@@ -311,7 +311,7 @@ const M = A.exports, F = {
       return this.show === void 0 ? this.internalShow : this.show;
     },
     modalTransitionName() {
-      return `modal-${this.outTransition ? "out" : "in"}`;
+      return "modal-".concat(this.outTransition ? "out" : "in");
     },
     playPauseName() {
       return this.playing ? i.t("Pause slideshow") : i.t("Start slideshow");
@@ -457,7 +457,8 @@ const M = A.exports, F = {
       this.focusTrap = _.createFocusTrap([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
     },
     clearFocusTrap() {
-      this.focusTrap && (this.focusTrap?.deactivate(), this.focusTrap = null);
+      var s;
+      this.focusTrap && ((s = this.focusTrap) == null || s.deactivate(), this.focusTrap = null);
     }
   }
 };
@@ -466,7 +467,7 @@ var R = function() {
   return t("transition", { attrs: { name: "fade", appear: "" }, on: { "after-enter": e.useFocusTrap, "before-leave": e.clearFocusTrap } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], ref: "mask", staticClass: "modal-mask", class: { "modal-mask--dark": e.dark || !e.closeButtonContained || e.hasPrevious || e.hasNext }, style: e.cssVariables, attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-name-" + e.randId, "aria-describedby": "modal-description-" + e.randId, tabindex: "-1" } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("div", { staticClass: "modal-header" }, [e.name.trim() !== "" ? t("h2", { staticClass: "modal-name", attrs: { id: "modal-name-" + e.randId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), t("div", { staticClass: "icons-menu" }, [e.hasNext && e.enableSlideshow ? t("button", { directives: [{ name: "tooltip", rawName: "v-tooltip.auto", value: e.playPauseName, expression: "playPauseName", modifiers: { auto: !0 } }], staticClass: "play-pause-icons", class: { "play-pause-icons--paused": e.slideshowPaused }, attrs: { type: "button" }, on: { click: e.togglePlayPause } }, [e.playing ? t("Pause", { staticClass: "play-pause-icons__pause", attrs: { size: e.iconSize } }) : t("Play", { staticClass: "play-pause-icons__play", attrs: { size: e.iconSize } }), t("span", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.playPauseName) + " ")]), e.playing ? t("svg", { staticClass: "progress-ring", attrs: { height: "50", width: "50" } }, [t("circle", { staticClass: "progress-ring__circle", attrs: { stroke: "white", "stroke-width": "2", fill: "transparent", r: "15", cx: "25", cy: "25" } })]) : e._e()], 1) : e._e(), t("NcActions", { staticClass: "header-actions", attrs: { inline: e.inlineActions } }, [e._t("actions")], 2), e.canClose && !e.closeButtonContained ? t("NcButton", { staticClass: "header-close", attrs: { "aria-label": e.closeButtonAriaLabel, type: "tertiary" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("Close", { attrs: { size: e.iconSize } })];
   }, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), t("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [
-    `modal-wrapper--${e.size}`,
+    "modal-wrapper--".concat(e.size),
     { "modal-wrapper--spread-navigation": e.spreadNavigation }
   ], on: { mousedown: function(a) {
     return a.target !== a.currentTarget ? null : e.handleClickModalWrapper.apply(null, arguments);

package/dist/Components/NcModal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcModal.cjs","sources":["../../src/utils/Timer.js","../../node_modules/vue-material-design-icons/ChevronLeft.vue","../../node_modules/vue-material-design-icons/Pause.vue","../../node_modules/vue-material-design-icons/Play.vue","../../src/components/NcModal/NcModal.vue","../../src/components/NcModal/index.js"],"sourcesContent":["/*\n @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n \n @author John Molakvoæ <skjnldsv@protonmail.com>\n \n @license AGPL-3.0-or-later\n \n This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n \n You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n \n /\n\n/*\n @param {Function} callback The function to call\n * @param {number} delay The time to wait\n /\nexport default function timer(callback, delay) {\n\tlet id\n\tlet started\n\tlet remaining = delay\n\tlet running\n\n\tthis.start = function() {\n\t\trunning = true\n\t\tstarted = new Date()\n\t\tid = setTimeout(callback, remaining)\n\t}\n\n\tthis.pause = function() {\n\t\trunning = false\n\t\tclearTimeout(id)\n\t\tremaining -= new Date() - started\n\t}\n\n\tthis.clear = function() {\n\t\trunning = false\n\t\tclearTimeout(id)\n\t\tremaining = 0\n\t}\n\n\tthis.getTimeLeft = function() {\n\t\tif (running) {\n\t\t\tthis.pause()\n\t\t\tthis.start()\n\t\t}\n\n\t\treturn remaining\n\t}\n\n\tthis.getStateRunning = function() {\n\t\treturn running\n\t}\n\n\tthis.start()\n}\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon chevron-left-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ChevronLeftIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon pause-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M14,19H18V5H14M6,19H10V5H6V19Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PauseIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon play-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M8,5.14V19.14L19,12.14L8,5.14Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PlayIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\nFor showing the modal you can use either `:show.sync=\"showModal\"` or `v-if` on the `NcModal`,\ndepending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\t:show.sync=\"modal\"\n\t\t\t@close=\"closeModal\"\n\t\t\tsize=\"small\"\n\t\t\tname=\"Name\"\n\t\t\t:outTransition=\"true\"\n\t\t\t:hasNext=\"true\"\n\t\t\t:hasPrevious=\"true\">\n\t\t\t<div class=\"modal__content\">Hello world</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n\n### Modal with more properties\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal with fields</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"modal\"\n\t\t\tref=\"modalRef\"\n\t\t\t@close=\"closeModal\"\n\t\t\tname=\"Name inside modal\">\n\t\t\t<div class=\"modal__content\">\n\t\t\t\t<h2>Please enter your name</h2>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<NcTextField label=\"First Name\" :value.sync=\"firstName\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<NcTextField label=\"Last Name\" :value.sync=\"lastName\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"pizza\">What is the most important pizza item?</label>\n\t\t\t\t\t<NcSelect input-id=\"pizza\" :options=\"['Cheese', 'Tomatos', 'Pineapples']\" v-model=\"pizza\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"emoji-trigger\">Select your favorite emoji</label>\n\t\t\t\t\t<NcEmojiPicker v-if=\"modalRef\" :container=\"modalRef.$el\">\n\t\t\t\t\t\t<NcButton id=\"emoji-trigger\">Select</NcButton>\n\t\t\t\t\t</NcEmojiPicker>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton\n\t\t\t\t\t:disabled=\"!firstName \|\| !lastName \|\| !pizza\"\n\t\t\t\t\t@click=\"closeModal\"\n\t\t\t\t\ttype=\"primary\">\n\t\t\t\t\tSubmit\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nimport { ref } from 'vue'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmodalRef: ref(null),\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false,\n\t\t\tfirstName: '',\n\t\t\tlastName: '',\n\t\t\tpizza: [],\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.firstName = ''\n\t\t\tthis.lastName = ''\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n}\n\n.modal__content h2 {\n\ttext-align: center;\n}\n\n.form-group {\n\tmargin: calc(var(--default-grid-baseline) 4) 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n}\n</style>\n```\n\n### Usage of popover in modal\n\n* Set container property to .modal-mask to inject popover context of the modal:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal v-if=\"modal\" @close=\"closeModal\" size=\"small\" class=\"emoji-modal\">\n\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t</NcEmojiPicker>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\temoji: '😛',\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t},\n\t\tselect(emoji) {\n\t\t\tthis.emoji = emoji\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition name=\"fade\"\n\t\tappear\n\t\t@after-enter=\"useFocusTrap\"\n\t\t@before-leave=\"clearFocusTrap\">\n\t\t<div v-show=\"showModal\"\n\t\t\tref=\"mask\"\n\t\t\tclass=\"modal-mask\"\n\t\t\t:class=\"{ 'modal-mask--dark': dark \|\| !closeButtonContained \|\| hasPrevious \|\| hasNext }\"\n\t\t\t:style=\"cssVariables\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-labelledby=\"'modal-name-' + randId\"\n\t\t\t:aria-describedby=\"'modal-description-' + randId\"\n\t\t\ttabindex=\"-1\">\n\t\t\t<!-- Header -->\n\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<h2 v-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t:id=\"'modal-name-' + randId\"\n\t\t\t\t\t\tclass=\"modal-name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</h2>\n\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t<button v-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\tv-tooltip.auto=\"playPauseName\"\n\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t@click=\"togglePlayPause\">\n\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t<Play v-if=\"!playing\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__play\" />\n\t\t\t\t\t\t\t<Pause v-else\n\t\t\t\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__pause\" />\n\t\t\t\t\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t\t\t\t\t{{ playPauseName }}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t<svg v-if=\"playing\"\n\t\t\t\t\t\t\t\tclass=\"progress-ring\"\n\t\t\t\t\t\t\t\theight=\"50\"\n\t\t\t\t\t\t\t\twidth=\"50\">\n\t\t\t\t\t\t\t\t<circle class=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\tr=\"15\"\n\t\t\t\t\t\t\t\t\tcx=\"25\"\n\t\t\t\t\t\t\t\t\tcy=\"25\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t<!-- @slot List of actions to show -->\n\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"canClose && !closeButtonContained\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Close :size=\"iconSize\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</transition>\n\n\t\t\t<!-- Content wrapper -->\n\t\t\t<transition :name=\"modalTransitionName\" appear>\n\t\t\t\t<div v-show=\"showModal\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t{ 'modal-wrapper--spread-navigation': spreadNavigation },\n\t\t\t\t\t]\"\n\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t<NcButton v-show=\"hasPrevious\"\n\t\t\t\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t:aria-label=\"prevButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"previous\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<ChevronLeft :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</transition>\n\n\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t<div :id=\"'modal-description-' + randId\" class=\"modal-container\">\n\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"canClose && closeButtonContained\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t<!-- @slot Modal content to render -->\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t<NcButton v-show=\"hasNext\"\n\t\t\t\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t:aria-label=\"nextButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"next\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<ChevronRight :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</transition>\n\t\t\t\t</div>\n\t\t\t</transition>\n\t\t</div>\n\t</transition>\n</template>\n\n<script>\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../../components/NcButton/index.js'\nimport Timer from '../../utils/Timer.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Pause from 'vue-material-design-icons/Pause.vue'\nimport Play from 'vue-material-design-icons/Play.vue'\n\nimport { createFocusTrap } from 'focus-trap'\nimport { useSwipe } from '@vueuse/core'\n\nexport default {\n\tname: 'NcModal',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronLeft,\n\t\tChevronRight,\n\t\tClose,\n\t\tPause,\n\t\tPlay,\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Name to be shown with the modal\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Declare if a previous slide is available\n\t\t /\n\t\thasPrevious: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare if a next slide is available\n\t\t /\n\t\thasNext: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare if hiding the modal should be animated\n\t\t /\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare if the slideshow functionality should be enabled\n\t\t /\n\t\tenableSlideshow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare the slide interval\n\t\t /\n\t\tslideshowDelay: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5000,\n\t\t},\n\t\t/\n\t\t Allow to pause an ongoing slideshow\n\t\t /\n\t\tslideshowPaused: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Enable swipe between slides\n\t\t /\n\t\tenableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tspreadNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Defines the modal size.\n\t\t * Default is 'normal'.\n\t\t * Available are 'small', 'normal', 'large' and 'full'.\n\t\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t\t /\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator: size => {\n\t\t\t\treturn ['small', 'normal', 'large', 'full'].includes(size)\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t Declare if the modal can be closed\n\t\t /\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Close the modal if the user clicked outside of the modal\n\t\t * Only relevant if `canClose` is set to true.\n\t\t /\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Makes the modal backdrop black if true\n\t\t * Will be overwritten if some buttons are shown outside\n\t\t /\n\t\tdark: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the modal container, pass `null` to prevent automatic container mounting\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [String, null],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Pass in false if you want the modal 'close' button to be displayed\n\t\t * outside the modal boundaries, in the top right corner of the window\n\t\t /\n\t\tcloseButtonContained: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Additional elements to add to the focus trap\n\t\t /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/\n\t\t Display x items inline\n\t\t \n\t\t @see Actions component usage\n\t\t /\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\tshow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Set element to return focus to after focus trap deactivation\n\t\t \n\t\t @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t /\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'previous',\n\t\t'next',\n\t\t'close',\n\t\t'update:show',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tmc: null,\n\t\t\tplaying: false,\n\t\t\tslideshowTimeout: null,\n\t\t\ticonSize: 24,\n\t\t\tfocusTrap: null,\n\t\t\trandId: GenRandomId(),\n\t\t\tinternalShow: true,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowModal() {\n\t\t\treturn (this.show === undefined) ? this.internalShow : this.show\n\t\t},\n\t\tmodalTransitionName() {\n\t\t\treturn `modal-${this.outTransition ? 'out' : 'in'}`\n\t\t},\n\t\tplayPauseName() {\n\t\t\treturn this.playing ? t('Pause slideshow') : t('Start slideshow')\n\t\t},\n\t\tcssVariables() {\n\t\t\treturn {\n\t\t\t\t'--slideshow-duration': this.slideshowDelay + 'ms',\n\t\t\t\t'--icon-size': this.iconSize + 'px',\n\t\t\t}\n\t\t},\n\n\t\tcloseButtonAriaLabel() {\n\t\t\treturn t('Close')\n\t\t},\n\t\tprevButtonAriaLabel() {\n\t\t\treturn t('Previous')\n\t\t},\n\t\tnextButtonAriaLabel() {\n\t\t\treturn t('Next')\n\t\t},\n\t},\n\n\twatch: {\n\t\t/\n\t\t Handle play/pause of an ongoing slideshow\n\t\t \n\t\t @param {boolean} paused is the player paused\n\t\t /\n\t\tslideshowPaused(paused) {\n\t\t\tif (this.slideshowTimeout) {\n\t\t\t\tif (paused) {\n\t\t\t\t\tthis.slideshowTimeout.pause()\n\t\t\t\t} else {\n\t\t\t\t\tthis.slideshowTimeout.start()\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tadditionalTrapElements(elements) {\n\t\t\tif (this.focusTrap) {\n\t\t\t\tconst contentContainer = this.$refs.mask\n\t\t\t\tthis.focusTrap.updateContainerElements([contentContainer, ...elements])\n\t\t\t}\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\twindow.addEventListener('keydown', this.handleKeydown)\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\tmounted() {\n\t\t// init clear view\n\t\tthis.useFocusTrap()\n\t\tthis.mc = useSwipe(this.$refs.mask, {\n\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t})\n\n\t\tif (this.container) {\n\t\t\tif (this.container === 'body') {\n\t\t\t\t// force mount the component to body\n\t\t\t\tdocument.body.insertBefore(this.$el, document.body.lastChild)\n\t\t\t} else {\n\t\t\t\tconst container = document.querySelector(this.container)\n\t\t\t\tcontainer.appendChild(this.$el)\n\t\t\t}\n\t\t}\n\t},\n\tdestroyed() {\n\t\tthis.clearFocusTrap()\n\t\tthis.$el.remove()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t// Events emitters\n\t\tprevious(event) {\n\t\t\t// do not send the event if nothing is available\n\t\t\tif (this.hasPrevious) {\n\t\t\t\t// if data is set, then it's a user mouse event\n\t\t\t\t// and not the slideshow handler, therefore\n\t\t\t\t// we reset the timer\n\t\t\t\tif (event) {\n\t\t\t\t\tthis.resetSlideshow()\n\t\t\t\t}\n\t\t\t\tthis.$emit('previous', event)\n\t\t\t}\n\t\t},\n\t\tnext(event) {\n\t\t\t// do not send the event if nothing is available\n\t\t\tif (this.hasNext) {\n\t\t\t\t// if data is set, then it's a mouse event\n\t\t\t\t// and not the slideshow handler, therefore\n\t\t\t\t// we reset the timer\n\t\t\t\tif (event) {\n\t\t\t\t\tthis.resetSlideshow()\n\t\t\t\t}\n\t\t\t\tthis.$emit('next', event)\n\t\t\t}\n\t\t},\n\t\tclose(data) {\n\t\t\t// do not fire event if forbidden\n\t\t\tif (this.canClose) {\n\t\t\t\t// We set internalShow here, so the out transitions properly run before the component is destroyed\n\t\t\t\tthis.internalShow = false\n\t\t\t\tthis.$emit('update:show', false)\n\n\t\t\t\t// delay closing for animation\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t/\n\t\t\t\t\t Emitted when the closing animation is finished\n\t\t\t\t\t /\n\t\t\t\t\tthis.$emit('close', data)\n\t\t\t\t}, 300)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handle click on modal wrapper\n\t\t * If `closeOnClickOutside` is set the modal will be closed\n\t\t \n\t\t @param {MouseEvent} event The click event\n\t\t /\n\t\thandleClickModalWrapper(event) {\n\t\t\tif (this.closeOnClickOutside) {\n\t\t\t\tthis.close(event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t @param {KeyboardEvent} event - keyboard event\n\t\t /\n\t\thandleKeydown(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tconst trapStack = getTrapStack()\n\t\t\t\t// Only close the most recent focus trap modal\n\t\t\t\tif (trapStack.length > 0 && trapStack[trapStack.length - 1] !== this.focusTrap) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\treturn this.close(event)\n\t\t\t}\n\n\t\t\tconst arrowHandlers = {\n\t\t\t\tArrowLeft: this.previous,\n\t\t\t\tArrowRight: this.next,\n\t\t\t}\n\t\t\tif (arrowHandlers[event.key]) {\n\t\t\t\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t\t\t\t// For example, when the focus is in Sidebar or NcActions's items,\n\t\t\t\t// arrow navigation should not be intercept by modal slider\n\t\t\t\tif (document.activeElement && !this.$el.contains(document.activeElement)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\treturn arrowHandlers[event.key](event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t handle the swipe event\n\t\t \n\t\t @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction\n\t\t /\n\t\thandleSwipe(e, direction) {\n\t\t\tif (this.enableSwipe) {\n\t\t\t\tif (direction === 'left') {\n\t\t\t\t\t// swiping to left to go to the next item\n\t\t\t\t\tthis.next(e)\n\t\t\t\t} else if (direction === 'right') {\n\t\t\t\t\t// swiping to right to go back to the previous item\n\t\t\t\t\tthis.previous(e)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Toggle the slideshow state\n\t\t /\n\t\ttogglePlayPause() {\n\t\t\tthis.playing = !this.playing\n\t\t\tif (this.playing) {\n\t\t\t\tthis.handleSlideshow()\n\t\t\t} else {\n\t\t\t\tthis.clearSlideshowTimeout()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Reset the slideshow timer and keep going if it was on\n\t\t /\n\t\tresetSlideshow() {\n\t\t\tthis.playing = !this.playing\n\t\t\tthis.clearSlideshowTimeout()\n\t\t\tthis.$nextTick(function() {\n\t\t\t\tthis.togglePlayPause()\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Handle the slideshow timer and next event\n\t\t /\n\t\thandleSlideshow() {\n\t\t\tthis.playing = true\n\t\t\tif (this.hasNext) {\n\t\t\t\tthis.slideshowTimeout = new Timer(() => {\n\t\t\t\t\tthis.next()\n\t\t\t\t\tthis.handleSlideshow()\n\t\t\t\t}, this.slideshowDelay)\n\t\t\t} else {\n\t\t\t\tthis.playing = false\n\t\t\t\tthis.clearSlideshowTimeout()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Clear slideshowTimeout if ongoing\n\t\t /\n\t\tclearSlideshowTimeout() {\n\t\t\tif (this.slideshowTimeout) {\n\t\t\t\tthis.slideshowTimeout.clear()\n\t\t\t}\n\t\t},\n\t\t/\n\t\t Add focus trap for accessibility.\n\t\t /\n\t\tasync useFocusTrap() {\n\t\t\t// Don't do anything if the modal is hidden,\n\t\t\t// or we have a focus trap already\n\t\t\tif (!this.showModal \|\| this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst contentContainer = this.$refs.mask\n\t\t\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\t\t\tawait this.$nextTick()\n\n\t\t\tconst options = {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: contentContainer,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap.\n\t\t\t\t// Focus trap is deactivated on modal close anyway.\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options)\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.modal-mask {\n\tposition: fixed;\n\tz-index: 9998;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, .5);\n\t&--dark {\n\t\tbackground-color: rgba(0, 0, 0, .92);\n\t}\n}\n\n.modal-header {\n\tposition: absolute;\n\tz-index: 10001;\n\ttop: 0;\n\tright: 0;\n\tleft: 0;\n\t// prevent vue show to use display:none and reseting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: $header-height;\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t.modal-name {\n\t\toverflow-x: hidden;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\tpadding: 0 #{$clickable-area 3} 0 12px; // maximum actions is 3\n\t\ttransition: padding ease 100ms;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: #fff;\n\t\tfont-size: $icon-margin;\n\t\tmargin-bottom: 0;\n\t}\n\n\t// On wider screens the name can be centered\n\t@media only screen and (min-width: $breakpoint-mobile) {\n\t\t.modal-name {\n\t\t\tpadding-left: #{$clickable-area * 3}; // maximum actions is 3\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\n\t\t.header-close {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.play-pause-icons {\n\t\t\tposition: relative;\n\t\t\twidth: $header-height;\n\t\t\theight: $header-height;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\t.play-pause-icons__play,\n\t\t\t\t.play-pause-icons__pause {\n\t\t\t\t\topacity: $opacity_full;\n\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\tbackground-color: $icon-focus-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__play,\n\t\t\t&__pause {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\t\t\t\tcursor: pointer;\n\t\t\t\topacity: $opacity_normal;\n\t\t\t}\n\t\t}\n\n\t\t.header-actions {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t&:deep() .action-item {\n\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\n\t\t\t&--single {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-size: 22px;\n\t\t\t}\n\t\t}\n\n\t\t:deep(button) {\n\t\t\t// force white instead of default main text\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t// Force the Actions menu icon to be the same size as other icons\n\t\t&:deep(.action-item__menutoggle) {\n\t\t\tpadding: 0;\n\t\t\tspan, svg {\n\t\t\t\twidth: var(--icon-size);\n\t\t\t\theight: var(--icon-size);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.modal-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Navigation buttons /\n\t.prev,\n\t.next {\n\t\tz-index: 10000;\n\t\theight: 35vh;\n\t\tmin-height: 300px;\n\t\tposition: absolute;\n\t\ttransition: opacity 250ms;\n\t\t// hover the mask\n\t\tcolor: white;\n\n\t\t&:focus-visible {\n\t\t\t// Override NcButton focus styles\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-box-shadow);\n\t\t}\n\t}\n\n\t.prev {\n\t\tleft: 2px;\n\t}\n\t.next {\n\t\tright: 2px;\n\t}\n\n\t/ Content /\n\t.modal-container {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tpadding: 0;\n\t\ttransition: transform 300ms ease;\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tbox-shadow: 0 0 40px rgba(0, 0, 0, .2);\n\n\t\t&__close {\n\t\t\t// Ensure the close button is always ontop of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tright: 4px;\n\t\t}\n\n\t\t&__content {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 52px; // At least the close button shall fit in\n\t\t\toverflow: auto; // avoids unecessary hacks if the content should be bigger than the modal\n\t\t}\n\t}\n\n\t// We allow 90% max-height, but we need to ensure the header does not overlap the modal\n\t// as the modal is centered, we need the space on top and bottom\n\t$max-modal-height: min(90%, calc(100% - 2 $header-height));\n\n\t// Sizing\n\t&--small {\n\t\t& > .modal-container {\n\t\t\twidth: 400px;\n\t\t\tmax-width: 90%;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--normal {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 600px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--large {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 900px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--full {\n\t\t& > .modal-container {\n\t\t\twidth: 100%;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: $header-height;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n\n\t// Make modal full screen on mobile\n\t@media only screen and ((max-width: $breakpoint-small-mobile) or (max-height: 400px)) {\n\t\t.modal-container {\n\t\t\tmax-width: initial;\n\t\t\twidth: 100%;\n\t\t\tmax-height: initial;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: $header-height;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n/* TRANSITIONS /\n.fade-enter-active,\n.fade-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.fade-enter,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter,\n.fade-visibility-leave-to {\n\tvisibility: hidden;\n\topacity: 0;\n}\n\n.modal-in-enter-active,\n.modal-in-leave-active,\n.modal-out-enter-active,\n.modal-out-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.modal-in-enter,\n.modal-in-leave-to,\n.modal-out-enter,\n.modal-out-leave-to {\n\topacity: 0;\n}\n\n.modal-in-enter .modal-container,\n.modal-in-leave-to .modal-container {\n\ttransform: scale(.9);\n}\n\n.modal-out-enter .modal-container,\n.modal-out-leave-to .modal-container {\n\ttransform: scale(1.1);\n}\n\n// animated circle\n$radius: 15;\n$pi: 3.14159265358979;\n\n.modal-mask .play-pause-icons {\n\t.progress-ring {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransform: rotate(-90deg);\n\t\t.progress-ring__circle {\n\t\t\ttransition: 100ms stroke-dashoffset;\n\t\t\ttransform-origin: 50% 50%; // axis compensation\n\t\t\tanimation: progressring linear var(--slideshow-duration) infinite;\n\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-dashoffset: $radius 2 * $pi; // radius * 2 * PI\n\t\t\tstroke-dasharray: $radius * 2 * $pi; // radius * 2 * PI\n\t\t}\n\t}\n\t&--paused {\n\t\t.icon-pause {\n\t\t\tanimation: breath 2s cubic-bezier(.4, 0, .2, 1) infinite;\n\t\t}\n\t\t.progress-ring__circle {\n\t\t\tanimation-play-state: paused !important;\n\t\t}\n\t}\n}\n\n// keyframes get scoped too and break the animation name, we need them unscoped\n@keyframes progressring {\n\tfrom {\n\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n@keyframes breath {\n\t0% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","/*\n @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n \n @author John Molakvoæ <skjnldsv@protonmail.com>\n \n @license AGPL-3.0-or-later\n \n This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n \n You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n \n /\nimport ScopeComponent from '../../utils/ScopeComponent.js'\nimport NcModal from './NcModal.vue'\n\nScopeComponent(NcModal)\n\nexport default NcModal\n"],"names":["timer","callback","delay","id","started","remaining","running","_sfc_main","NcActions","ChevronLeft","ChevronRight","Close","Pause","Play","NcButton","Tooltip","size","GenRandomId","t","paused","elements","contentContainer","useSwipe","event","data","trapStack","getTrapStack","arrowHandlers","e","direction","Timer","options","createFocusTrap","ScopeComponent","NcModal"],"mappings":"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","x_google_ignoreList":[1,2,3]}
1	+ {"version":3,"file":"NcModal.cjs","sources":["../../src/utils/Timer.js","../../node_modules/vue-material-design-icons/ChevronLeft.vue","../../node_modules/vue-material-design-icons/Pause.vue","../../node_modules/vue-material-design-icons/Play.vue","../../src/components/NcModal/NcModal.vue","../../src/components/NcModal/index.js"],"sourcesContent":["/*\n @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n \n @author John Molakvoæ <skjnldsv@protonmail.com>\n \n @license AGPL-3.0-or-later\n \n This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n \n You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n \n /\n\n/*\n @param {Function} callback The function to call\n * @param {number} delay The time to wait\n /\nexport default function timer(callback, delay) {\n\tlet id\n\tlet started\n\tlet remaining = delay\n\tlet running\n\n\tthis.start = function() {\n\t\trunning = true\n\t\tstarted = new Date()\n\t\tid = setTimeout(callback, remaining)\n\t}\n\n\tthis.pause = function() {\n\t\trunning = false\n\t\tclearTimeout(id)\n\t\tremaining -= new Date() - started\n\t}\n\n\tthis.clear = function() {\n\t\trunning = false\n\t\tclearTimeout(id)\n\t\tremaining = 0\n\t}\n\n\tthis.getTimeLeft = function() {\n\t\tif (running) {\n\t\t\tthis.pause()\n\t\t\tthis.start()\n\t\t}\n\n\t\treturn remaining\n\t}\n\n\tthis.getStateRunning = function() {\n\t\treturn running\n\t}\n\n\tthis.start()\n}\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon chevron-left-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ChevronLeftIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon pause-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M14,19H18V5H14M6,19H10V5H6V19Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PauseIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : true\"\n :aria-label=\"title\"\n class=\"material-design-icon play-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M8,5.14V19.14L19,12.14L8,5.14Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PlayIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\nFor showing the modal you can use either `:show.sync=\"showModal\"` or `v-if` on the `NcModal`,\ndepending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal\n\t\t\t:show.sync=\"modal\"\n\t\t\t@close=\"closeModal\"\n\t\t\tsize=\"small\"\n\t\t\tname=\"Name\"\n\t\t\t:outTransition=\"true\"\n\t\t\t:hasNext=\"true\"\n\t\t\t:hasPrevious=\"true\">\n\t\t\t<div class=\"modal__content\">Hello world</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n\n### Modal with more properties\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal with fields</NcButton>\n\t\t<NcModal\n\t\t\tv-if=\"modal\"\n\t\t\tref=\"modalRef\"\n\t\t\t@close=\"closeModal\"\n\t\t\tname=\"Name inside modal\">\n\t\t\t<div class=\"modal__content\">\n\t\t\t\t<h2>Please enter your name</h2>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<NcTextField label=\"First Name\" :value.sync=\"firstName\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<NcTextField label=\"Last Name\" :value.sync=\"lastName\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"pizza\">What is the most important pizza item?</label>\n\t\t\t\t\t<NcSelect input-id=\"pizza\" :options=\"['Cheese', 'Tomatos', 'Pineapples']\" v-model=\"pizza\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"form-group\">\n\t\t\t\t\t<label for=\"emoji-trigger\">Select your favorite emoji</label>\n\t\t\t\t\t<NcEmojiPicker v-if=\"modalRef\" :container=\"modalRef.$el\">\n\t\t\t\t\t\t<NcButton id=\"emoji-trigger\">Select</NcButton>\n\t\t\t\t\t</NcEmojiPicker>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton\n\t\t\t\t\t:disabled=\"!firstName \|\| !lastName \|\| !pizza\"\n\t\t\t\t\t@click=\"closeModal\"\n\t\t\t\t\ttype=\"primary\">\n\t\t\t\t\tSubmit\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nimport { ref } from 'vue'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmodalRef: ref(null),\n\t\t}\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tmodal: false,\n\t\t\tfirstName: '',\n\t\t\tlastName: '',\n\t\t\tpizza: [],\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.firstName = ''\n\t\t\tthis.lastName = ''\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t}\n\t}\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n}\n\n.modal__content h2 {\n\ttext-align: center;\n}\n\n.form-group {\n\tmargin: calc(var(--default-grid-baseline) 4) 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n}\n</style>\n```\n\n### Usage of popover in modal\n\n* Set container property to .modal-mask to inject popover context of the modal:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showModal\">Show Modal</NcButton>\n\t\t<NcModal v-if=\"modal\" @close=\"closeModal\" size=\"small\" class=\"emoji-modal\">\n\t\t\t<NcEmojiPicker container=\".emoji-modal\" @select=\"select\">\n\t\t\t\t<NcButton>Select emoji {{ emoji }}</NcButton>\n\t\t\t</NcEmojiPicker>\n\t\t</NcModal>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\temoji: '😛',\n\t\t\tmodal: false\n\t\t}\n\t},\n\tmethods: {\n\t\tshowModal() {\n\t\t\tthis.modal = true\n\t\t},\n\t\tcloseModal() {\n\t\t\tthis.modal = false\n\t\t},\n\t\tselect(emoji) {\n\t\t\tthis.emoji = emoji\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n.modal__content {\n\tmargin: 50px;\n\ttext-align: center;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition name=\"fade\"\n\t\tappear\n\t\t@after-enter=\"useFocusTrap\"\n\t\t@before-leave=\"clearFocusTrap\">\n\t\t<div v-show=\"showModal\"\n\t\t\tref=\"mask\"\n\t\t\tclass=\"modal-mask\"\n\t\t\t:class=\"{ 'modal-mask--dark': dark \|\| !closeButtonContained \|\| hasPrevious \|\| hasNext }\"\n\t\t\t:style=\"cssVariables\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-labelledby=\"'modal-name-' + randId\"\n\t\t\t:aria-describedby=\"'modal-description-' + randId\"\n\t\t\ttabindex=\"-1\">\n\t\t\t<!-- Header -->\n\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<h2 v-if=\"name.trim() !== ''\"\n\t\t\t\t\t\t:id=\"'modal-name-' + randId\"\n\t\t\t\t\t\tclass=\"modal-name\">\n\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t</h2>\n\t\t\t\t\t<div class=\"icons-menu\">\n\t\t\t\t\t\t<!-- Play-pause toggle -->\n\t\t\t\t\t\t<button v-if=\"hasNext && enableSlideshow\"\n\t\t\t\t\t\t\tv-tooltip.auto=\"playPauseName\"\n\t\t\t\t\t\t\t:class=\"{ 'play-pause-icons--paused': slideshowPaused }\"\n\t\t\t\t\t\t\tclass=\"play-pause-icons\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t@click=\"togglePlayPause\">\n\t\t\t\t\t\t\t<!-- Play/pause icons -->\n\t\t\t\t\t\t\t<Play v-if=\"!playing\"\n\t\t\t\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__play\" />\n\t\t\t\t\t\t\t<Pause v-else\n\t\t\t\t\t\t\t\t:size=\"iconSize\"\n\t\t\t\t\t\t\t\tclass=\"play-pause-icons__pause\" />\n\t\t\t\t\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t\t\t\t\t{{ playPauseName }}\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<!-- Progress circle, css animated -->\n\t\t\t\t\t\t\t<svg v-if=\"playing\"\n\t\t\t\t\t\t\t\tclass=\"progress-ring\"\n\t\t\t\t\t\t\t\theight=\"50\"\n\t\t\t\t\t\t\t\twidth=\"50\">\n\t\t\t\t\t\t\t\t<circle class=\"progress-ring__circle\"\n\t\t\t\t\t\t\t\t\tstroke=\"white\"\n\t\t\t\t\t\t\t\t\tstroke-width=\"2\"\n\t\t\t\t\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\t\t\t\t\tr=\"15\"\n\t\t\t\t\t\t\t\t\tcx=\"25\"\n\t\t\t\t\t\t\t\t\tcy=\"25\" />\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t<!-- Actions menu -->\n\t\t\t\t\t\t<NcActions class=\"header-actions\" :inline=\"inlineActions\">\n\t\t\t\t\t\t\t<!-- @slot List of actions to show -->\n\t\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t\t</NcActions>\n\n\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"canClose && !closeButtonContained\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\tclass=\"header-close\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Close :size=\"iconSize\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</transition>\n\n\t\t\t<!-- Content wrapper -->\n\t\t\t<transition :name=\"modalTransitionName\" appear>\n\t\t\t\t<div v-show=\"showModal\"\n\t\t\t\t\t:class=\"[\n\t\t\t\t\t\t`modal-wrapper--${size}`,\n\t\t\t\t\t\t{ 'modal-wrapper--spread-navigation': spreadNavigation },\n\t\t\t\t\t]\"\n\t\t\t\t\tclass=\"modal-wrapper\"\n\t\t\t\t\t@mousedown.self=\"handleClickModalWrapper\">\n\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t<NcButton v-show=\"hasPrevious\"\n\t\t\t\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\t\t\t\tclass=\"prev\"\n\t\t\t\t\t\t\t:aria-label=\"prevButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"previous\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<ChevronLeft :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</transition>\n\n\t\t\t\t\t<!-- Content -->\n\t\t\t\t\t<div :id=\"'modal-description-' + randId\" class=\"modal-container\">\n\t\t\t\t\t\t<!-- Close modal -->\n\t\t\t\t\t\t<NcButton v-if=\"canClose && closeButtonContained\"\n\t\t\t\t\t\t\ttype=\"tertiary\"\n\t\t\t\t\t\t\tclass=\"modal-container__close\"\n\t\t\t\t\t\t\t:aria-label=\"closeButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"close\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t<div class=\"modal-container__content\">\n\t\t\t\t\t\t\t<!-- @slot Modal content to render -->\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<!-- Navigation button -->\n\t\t\t\t\t<transition name=\"fade-visibility\" appear>\n\t\t\t\t\t\t<NcButton v-show=\"hasNext\"\n\t\t\t\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\t\t\t\tclass=\"next\"\n\t\t\t\t\t\t\t:aria-label=\"nextButtonAriaLabel\"\n\t\t\t\t\t\t\t@click=\"next\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<ChevronRight :size=\"40\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</transition>\n\t\t\t\t</div>\n\t\t\t</transition>\n\t\t</div>\n\t</transition>\n</template>\n\n<script>\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../../components/NcButton/index.js'\nimport Timer from '../../utils/Timer.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\nimport Pause from 'vue-material-design-icons/Pause.vue'\nimport Play from 'vue-material-design-icons/Play.vue'\n\nimport { createFocusTrap } from 'focus-trap'\nimport { useSwipe } from '@vueuse/core'\n\nexport default {\n\tname: 'NcModal',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronLeft,\n\t\tChevronRight,\n\t\tClose,\n\t\tPause,\n\t\tPlay,\n\t\tNcButton,\n\t},\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tprops: {\n\t\t/*\n\t\t Name to be shown with the modal\n\t\t /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/\n\t\t Declare if a previous slide is available\n\t\t /\n\t\thasPrevious: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare if a next slide is available\n\t\t /\n\t\thasNext: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare if hiding the modal should be animated\n\t\t /\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare if the slideshow functionality should be enabled\n\t\t /\n\t\tenableSlideshow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Declare the slide interval\n\t\t /\n\t\tslideshowDelay: {\n\t\t\ttype: Number,\n\t\t\tdefault: 5000,\n\t\t},\n\t\t/\n\t\t Allow to pause an ongoing slideshow\n\t\t /\n\t\tslideshowPaused: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Enable swipe between slides\n\t\t /\n\t\tenableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\tspreadNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/\n\t\t Defines the modal size.\n\t\t * Default is 'normal'.\n\t\t * Available are 'small', 'normal', 'large' and 'full'.\n\t\t * All sizes except 'small' change automatically to full-screen on mobile.\n\t\t /\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'normal',\n\t\t\tvalidator: size => {\n\t\t\t\treturn ['small', 'normal', 'large', 'full'].includes(size)\n\t\t\t},\n\t\t},\n\n\t\t/\n\t\t Declare if the modal can be closed\n\t\t /\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Close the modal if the user clicked outside of the modal\n\t\t * Only relevant if `canClose` is set to true.\n\t\t /\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Makes the modal backdrop black if true\n\t\t * Will be overwritten if some buttons are shown outside\n\t\t /\n\t\tdark: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Selector for the modal container, pass `null` to prevent automatic container mounting\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: [String, null],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Pass in false if you want the modal 'close' button to be displayed\n\t\t * outside the modal boundaries, in the top right corner of the window\n\t\t /\n\t\tcloseButtonContained: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Additional elements to add to the focus trap\n\t\t /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/\n\t\t Display x items inline\n\t\t \n\t\t @see Actions component usage\n\t\t /\n\t\tinlineActions: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\tshow: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/\n\t\t Set element to return focus to after focus trap deactivation\n\t\t \n\t\t @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t /\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'previous',\n\t\t'next',\n\t\t'close',\n\t\t'update:show',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tmc: null,\n\t\t\tplaying: false,\n\t\t\tslideshowTimeout: null,\n\t\t\ticonSize: 24,\n\t\t\tfocusTrap: null,\n\t\t\trandId: GenRandomId(),\n\t\t\tinternalShow: true,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowModal() {\n\t\t\treturn (this.show === undefined) ? this.internalShow : this.show\n\t\t},\n\t\tmodalTransitionName() {\n\t\t\treturn `modal-${this.outTransition ? 'out' : 'in'}`\n\t\t},\n\t\tplayPauseName() {\n\t\t\treturn this.playing ? t('Pause slideshow') : t('Start slideshow')\n\t\t},\n\t\tcssVariables() {\n\t\t\treturn {\n\t\t\t\t'--slideshow-duration': this.slideshowDelay + 'ms',\n\t\t\t\t'--icon-size': this.iconSize + 'px',\n\t\t\t}\n\t\t},\n\n\t\tcloseButtonAriaLabel() {\n\t\t\treturn t('Close')\n\t\t},\n\t\tprevButtonAriaLabel() {\n\t\t\treturn t('Previous')\n\t\t},\n\t\tnextButtonAriaLabel() {\n\t\t\treturn t('Next')\n\t\t},\n\t},\n\n\twatch: {\n\t\t/\n\t\t Handle play/pause of an ongoing slideshow\n\t\t \n\t\t @param {boolean} paused is the player paused\n\t\t /\n\t\tslideshowPaused(paused) {\n\t\t\tif (this.slideshowTimeout) {\n\t\t\t\tif (paused) {\n\t\t\t\t\tthis.slideshowTimeout.pause()\n\t\t\t\t} else {\n\t\t\t\t\tthis.slideshowTimeout.start()\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tadditionalTrapElements(elements) {\n\t\t\tif (this.focusTrap) {\n\t\t\t\tconst contentContainer = this.$refs.mask\n\t\t\t\tthis.focusTrap.updateContainerElements([contentContainer, ...elements])\n\t\t\t}\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\twindow.addEventListener('keydown', this.handleKeydown)\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener('keydown', this.handleKeydown)\n\t\tthis.mc.stop()\n\t},\n\tmounted() {\n\t\t// init clear view\n\t\tthis.useFocusTrap()\n\t\tthis.mc = useSwipe(this.$refs.mask, {\n\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t})\n\n\t\tif (this.container) {\n\t\t\tif (this.container === 'body') {\n\t\t\t\t// force mount the component to body\n\t\t\t\tdocument.body.insertBefore(this.$el, document.body.lastChild)\n\t\t\t} else {\n\t\t\t\tconst container = document.querySelector(this.container)\n\t\t\t\tcontainer.appendChild(this.$el)\n\t\t\t}\n\t\t}\n\t},\n\tdestroyed() {\n\t\tthis.clearFocusTrap()\n\t\tthis.$el.remove()\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t// Events emitters\n\t\tprevious(event) {\n\t\t\t// do not send the event if nothing is available\n\t\t\tif (this.hasPrevious) {\n\t\t\t\t// if data is set, then it's a user mouse event\n\t\t\t\t// and not the slideshow handler, therefore\n\t\t\t\t// we reset the timer\n\t\t\t\tif (event) {\n\t\t\t\t\tthis.resetSlideshow()\n\t\t\t\t}\n\t\t\t\tthis.$emit('previous', event)\n\t\t\t}\n\t\t},\n\t\tnext(event) {\n\t\t\t// do not send the event if nothing is available\n\t\t\tif (this.hasNext) {\n\t\t\t\t// if data is set, then it's a mouse event\n\t\t\t\t// and not the slideshow handler, therefore\n\t\t\t\t// we reset the timer\n\t\t\t\tif (event) {\n\t\t\t\t\tthis.resetSlideshow()\n\t\t\t\t}\n\t\t\t\tthis.$emit('next', event)\n\t\t\t}\n\t\t},\n\t\tclose(data) {\n\t\t\t// do not fire event if forbidden\n\t\t\tif (this.canClose) {\n\t\t\t\t// We set internalShow here, so the out transitions properly run before the component is destroyed\n\t\t\t\tthis.internalShow = false\n\t\t\t\tthis.$emit('update:show', false)\n\n\t\t\t\t// delay closing for animation\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t/\n\t\t\t\t\t Emitted when the closing animation is finished\n\t\t\t\t\t /\n\t\t\t\t\tthis.$emit('close', data)\n\t\t\t\t}, 300)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Handle click on modal wrapper\n\t\t * If `closeOnClickOutside` is set the modal will be closed\n\t\t \n\t\t @param {MouseEvent} event The click event\n\t\t /\n\t\thandleClickModalWrapper(event) {\n\t\t\tif (this.closeOnClickOutside) {\n\t\t\t\tthis.close(event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t @param {KeyboardEvent} event - keyboard event\n\t\t /\n\t\thandleKeydown(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tconst trapStack = getTrapStack()\n\t\t\t\t// Only close the most recent focus trap modal\n\t\t\t\tif (trapStack.length > 0 && trapStack[trapStack.length - 1] !== this.focusTrap) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\treturn this.close(event)\n\t\t\t}\n\n\t\t\tconst arrowHandlers = {\n\t\t\t\tArrowLeft: this.previous,\n\t\t\t\tArrowRight: this.next,\n\t\t\t}\n\t\t\tif (arrowHandlers[event.key]) {\n\t\t\t\t// Ignore arrow navigation, if there is a current focus outside the modal.\n\t\t\t\t// For example, when the focus is in Sidebar or NcActions's items,\n\t\t\t\t// arrow navigation should not be intercept by modal slider\n\t\t\t\tif (document.activeElement && !this.$el.contains(document.activeElement)) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\treturn arrowHandlers[event.key](event)\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t handle the swipe event\n\t\t \n\t\t @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction Swipe direction\n\t\t /\n\t\thandleSwipe(e, direction) {\n\t\t\tif (this.enableSwipe) {\n\t\t\t\tif (direction === 'left') {\n\t\t\t\t\t// swiping to left to go to the next item\n\t\t\t\t\tthis.next(e)\n\t\t\t\t} else if (direction === 'right') {\n\t\t\t\t\t// swiping to right to go back to the previous item\n\t\t\t\t\tthis.previous(e)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Toggle the slideshow state\n\t\t /\n\t\ttogglePlayPause() {\n\t\t\tthis.playing = !this.playing\n\t\t\tif (this.playing) {\n\t\t\t\tthis.handleSlideshow()\n\t\t\t} else {\n\t\t\t\tthis.clearSlideshowTimeout()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Reset the slideshow timer and keep going if it was on\n\t\t /\n\t\tresetSlideshow() {\n\t\t\tthis.playing = !this.playing\n\t\t\tthis.clearSlideshowTimeout()\n\t\t\tthis.$nextTick(function() {\n\t\t\t\tthis.togglePlayPause()\n\t\t\t})\n\t\t},\n\n\t\t/\n\t\t Handle the slideshow timer and next event\n\t\t /\n\t\thandleSlideshow() {\n\t\t\tthis.playing = true\n\t\t\tif (this.hasNext) {\n\t\t\t\tthis.slideshowTimeout = new Timer(() => {\n\t\t\t\t\tthis.next()\n\t\t\t\t\tthis.handleSlideshow()\n\t\t\t\t}, this.slideshowDelay)\n\t\t\t} else {\n\t\t\t\tthis.playing = false\n\t\t\t\tthis.clearSlideshowTimeout()\n\t\t\t}\n\t\t},\n\n\t\t/\n\t\t Clear slideshowTimeout if ongoing\n\t\t /\n\t\tclearSlideshowTimeout() {\n\t\t\tif (this.slideshowTimeout) {\n\t\t\t\tthis.slideshowTimeout.clear()\n\t\t\t}\n\t\t},\n\t\t/\n\t\t Add focus trap for accessibility.\n\t\t /\n\t\tasync useFocusTrap() {\n\t\t\t// Don't do anything if the modal is hidden,\n\t\t\t// or we have a focus trap already\n\t\t\tif (!this.showModal \|\| this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst contentContainer = this.$refs.mask\n\t\t\t// wait until all children are mounted and available in the DOM before focusTrap can be added\n\t\t\tawait this.$nextTick()\n\n\t\t\tconst options = {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: contentContainer,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\t// Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap.\n\t\t\t\t// Focus trap is deactivated on modal close anyway.\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options)\n\t\t\tthis.focusTrap.activate()\n\t\t},\n\t\tclearFocusTrap() {\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.focusTrap?.deactivate()\n\t\t\tthis.focusTrap = null\n\t\t},\n\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.modal-mask {\n\tposition: fixed;\n\tz-index: 9998;\n\ttop: 0;\n\tleft: 0;\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-color: rgba(0, 0, 0, .5);\n\t&--dark {\n\t\tbackground-color: rgba(0, 0, 0, .92);\n\t}\n}\n\n.modal-header {\n\tposition: absolute;\n\tz-index: 10001;\n\ttop: 0;\n\tright: 0;\n\tleft: 0;\n\t// prevent vue show to use display:none and reseting\n\t// the circle animation loop\n\tdisplay: flex !important;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: $header-height;\n\toverflow: hidden;\n\ttransition: opacity 250ms, visibility 250ms;\n\n\t.modal-name {\n\t\toverflow-x: hidden;\n\t\tbox-sizing: border-box;\n\t\twidth: 100%;\n\t\tpadding: 0 #{$clickable-area 3} 0 12px; // maximum actions is 3\n\t\ttransition: padding ease 100ms;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tcolor: #fff;\n\t\tfont-size: $icon-margin;\n\t\tmargin-bottom: 0;\n\t}\n\n\t// On wider screens the name can be centered\n\t@media only screen and (min-width: $breakpoint-mobile) {\n\t\t.modal-name {\n\t\t\tpadding-left: #{$clickable-area * 3}; // maximum actions is 3\n\t\t\ttext-align: center;\n\t\t}\n\t}\n\n\t.icons-menu {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\n\t\t.header-close {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbox-sizing: border-box;\n\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\t\t\tpadding: 0;\n\t\t}\n\n\t\t.play-pause-icons {\n\t\t\tposition: relative;\n\t\t\twidth: $header-height;\n\t\t\theight: $header-height;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\t\t\tborder: none;\n\t\t\tbackground-color: transparent;\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\t.play-pause-icons__play,\n\t\t\t\t.play-pause-icons__pause {\n\t\t\t\t\topacity: $opacity_full;\n\t\t\t\t\tborder-radius: math.div($clickable-area, 2);\n\t\t\t\t\tbackground-color: $icon-focus-bg;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&__play,\n\t\t\t&__pause {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\t\t\t\tcursor: pointer;\n\t\t\t\topacity: $opacity_normal;\n\t\t\t}\n\t\t}\n\n\t\t.header-actions {\n\t\t\tcolor: white;\n\t\t}\n\n\t\t&:deep() .action-item {\n\t\t\tmargin: math.div($header-height - $clickable-area, 2);\n\n\t\t\t&--single {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: $clickable-area;\n\t\t\t\theight: $clickable-area;\n\t\t\t\tcursor: pointer;\n\t\t\t\tbackground-position: center;\n\t\t\t\tbackground-size: 22px;\n\t\t\t}\n\t\t}\n\n\t\t:deep(button) {\n\t\t\t// force white instead of default main text\n\t\t\tcolor: #fff;\n\t\t}\n\n\t\t// Force the Actions menu icon to be the same size as other icons\n\t\t&:deep(.action-item__menutoggle) {\n\t\t\tpadding: 0;\n\t\t\tspan, svg {\n\t\t\t\twidth: var(--icon-size);\n\t\t\t\theight: var(--icon-size);\n\t\t\t}\n\t\t}\n\t}\n}\n\n.modal-wrapper {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbox-sizing: border-box;\n\twidth: 100%;\n\theight: 100%;\n\n\t/* Navigation buttons /\n\t.prev,\n\t.next {\n\t\tz-index: 10000;\n\t\theight: 35vh;\n\t\tmin-height: 300px;\n\t\tposition: absolute;\n\t\ttransition: opacity 250ms;\n\t\t// hover the mask\n\t\tcolor: white;\n\n\t\t&:focus-visible {\n\t\t\t// Override NcButton focus styles\n\t\t\tbox-shadow: 0 0 0 2px var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-box-shadow);\n\t\t}\n\t}\n\n\t.prev {\n\t\tleft: 2px;\n\t}\n\t.next {\n\t\tright: 2px;\n\t}\n\n\t/ Content /\n\t.modal-container {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\tpadding: 0;\n\t\ttransition: transform 300ms ease;\n\t\tborder-radius: var(--border-radius-large);\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tbox-shadow: 0 0 40px rgba(0, 0, 0, .2);\n\n\t\t&__close {\n\t\t\t// Ensure the close button is always ontop of the content\n\t\t\tz-index: 1;\n\t\t\tposition: absolute;\n\t\t\ttop: 4px;\n\t\t\tright: 4px;\n\t\t}\n\n\t\t&__content {\n\t\t\twidth: 100%;\n\t\t\tmin-height: 52px; // At least the close button shall fit in\n\t\t\toverflow: auto; // avoids unecessary hacks if the content should be bigger than the modal\n\t\t}\n\t}\n\n\t// We allow 90% max-height, but we need to ensure the header does not overlap the modal\n\t// as the modal is centered, we need the space on top and bottom\n\t$max-modal-height: min(90%, calc(100% - 2 $header-height));\n\n\t// Sizing\n\t&--small {\n\t\t& > .modal-container {\n\t\t\twidth: 400px;\n\t\t\tmax-width: 90%;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--normal {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 600px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--large {\n\t\t& > .modal-container {\n\t\t\tmax-width: 90%;\n\t\t\twidth: 900px;\n\t\t\tmax-height: $max-modal-height;\n\t\t}\n\t}\n\t&--full {\n\t\t& > .modal-container {\n\t\t\twidth: 100%;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: $header-height;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n\n\t// Make modal full screen on mobile\n\t@media only screen and ((max-width: $breakpoint-small-mobile) or (max-height: 400px)) {\n\t\t.modal-container {\n\t\t\tmax-width: initial;\n\t\t\twidth: 100%;\n\t\t\tmax-height: initial;\n\t\t\theight: calc(100% - var(--header-height));\n\t\t\tposition: absolute;\n\t\t\ttop: $header-height;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n/* TRANSITIONS /\n.fade-enter-active,\n.fade-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.fade-enter,\n.fade-leave-to {\n\topacity: 0;\n}\n\n.fade-visibility-enter,\n.fade-visibility-leave-to {\n\tvisibility: hidden;\n\topacity: 0;\n}\n\n.modal-in-enter-active,\n.modal-in-leave-active,\n.modal-out-enter-active,\n.modal-out-leave-active {\n\ttransition: opacity 250ms;\n}\n\n.modal-in-enter,\n.modal-in-leave-to,\n.modal-out-enter,\n.modal-out-leave-to {\n\topacity: 0;\n}\n\n.modal-in-enter .modal-container,\n.modal-in-leave-to .modal-container {\n\ttransform: scale(.9);\n}\n\n.modal-out-enter .modal-container,\n.modal-out-leave-to .modal-container {\n\ttransform: scale(1.1);\n}\n\n// animated circle\n$radius: 15;\n$pi: 3.14159265358979;\n\n.modal-mask .play-pause-icons {\n\t.progress-ring {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransform: rotate(-90deg);\n\t\t.progress-ring__circle {\n\t\t\ttransition: 100ms stroke-dashoffset;\n\t\t\ttransform-origin: 50% 50%; // axis compensation\n\t\t\tanimation: progressring linear var(--slideshow-duration) infinite;\n\n\t\t\tstroke-linecap: round;\n\t\t\tstroke-dashoffset: $radius 2 * $pi; // radius * 2 * PI\n\t\t\tstroke-dasharray: $radius * 2 * $pi; // radius * 2 * PI\n\t\t}\n\t}\n\t&--paused {\n\t\t.icon-pause {\n\t\t\tanimation: breath 2s cubic-bezier(.4, 0, .2, 1) infinite;\n\t\t}\n\t\t.progress-ring__circle {\n\t\t\tanimation-play-state: paused !important;\n\t\t}\n\t}\n}\n\n// keyframes get scoped too and break the animation name, we need them unscoped\n@keyframes progressring {\n\tfrom {\n\t\tstroke-dashoffset: $radius * 2 * $pi; // radius * 2 * PI\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}\n\n@keyframes breath {\n\t0% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","/*\n @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n \n @author John Molakvoæ <skjnldsv@protonmail.com>\n \n @license AGPL-3.0-or-later\n \n This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the\n * License, or (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU Affero General Public License for more details.\n \n You should have received a copy of the GNU Affero General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n \n /\nimport ScopeComponent from '../../utils/ScopeComponent.js'\nimport NcModal from './NcModal.vue'\n\nScopeComponent(NcModal)\n\nexport default NcModal\n"],"names":["timer","callback","delay","id","started","remaining","running","_sfc_main","NcActions","ChevronLeft","ChevronRight","Close","Pause","Play","NcButton","Tooltip","size","GenRandomId","t","paused","elements","contentContainer","useSwipe","event","data","trapStack","getTrapStack","arrowHandlers","e","direction","Timer","options","createFocusTrap","_a","ScopeComponent","NcModal"],"mappings":"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","x_google_ignoreList":[1,2,3]}

package/dist/Components/NcModal.mjs CHANGED Viewed

@@ -1,14 +1,14 @@
-import '../assets/NcModal-sIK5sUoC.css';
-import { S as c } from "../chunks/ScopeComponent-fOJOJbfW.mjs";
-import { g as r } from "../chunks/focusTrap-Py2bQ9-r.mjs";
-import { r as u, F as d, G as p, a as i } from "../chunks/_l10n-9dioj9MT.mjs";
-import { G as h } from "../chunks/GenRandomId-VodkdWbp.mjs";
-import { N as f } from "../chunks/NcActions-4NCnCJdf.mjs";
+import '../assets/NcModal-CwgrmxSg.css';
+import { S as c } from "../chunks/ScopeComponent-LxI8YPnR.mjs";
+import { g as r } from "../chunks/focusTrap-Be9GEB5C.mjs";
+import { r as u, D as d, E as p, a as i } from "../chunks/_l10n-D8Scz3mH.mjs";
+import { G as h } from "../chunks/GenRandomId-BW3iYFf9.mjs";
+import { N as f } from "../chunks/NcActions-CpU9WXzM.mjs";
 import m from "./NcButton.mjs";
 import "../Directives/Tooltip.mjs";
-import { n as l } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.mjs";
-import { C as y } from "../chunks/ChevronRight-9owhU_17.mjs";
-import { C as _ } from "../chunks/Close-QtH6_3PP.mjs";
+import { n as l } from "../chunks/_plugin-vue2_normalizer-Bj5bLKV4.mjs";
+import { C as y } from "../chunks/ChevronRight-DL3e8bjj.mjs";
+import { C as _ } from "../chunks/Close-BtO5TPBO.mjs";
 import { createFocusTrap as w } from "focus-trap";
 import { useSwipe as v } from "@vueuse/core";
 import { VTooltip as g } from "floating-vue";
@@ -129,15 +129,15 @@ const z = P.exports, L = {
     }
   }
 };
-var F = function() {
+var M = function() {
   var e = this, t = e._self._c;
   return t("span", e._b({ staticClass: "material-design-icon play-icon", attrs: { "aria-hidden": e.title ? null : !0, "aria-label": e.title, role: "img" }, on: { click: function(a) {
     return e.$emit("click", a);
   } } }, "span", e.$attrs, !1), [t("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.size, viewBox: "0 0 24 24" } }, [t("path", { attrs: { d: "M8,5.14V19.14L19,12.14L8,5.14Z" } }, [e.title ? t("title", [e._v(e._s(e.title))]) : e._e()])])]);
-}, M = [], A = /* @__PURE__ */ l(
+}, F = [], A = /* @__PURE__ */ l(
   L,
-  F,
   M,
+  F,
   !1,
   null,
   null,
@@ -320,7 +320,7 @@ const E = A.exports, R = {
       return this.show === void 0 ? this.internalShow : this.show;
     },
     modalTransitionName() {
-      return `modal-${this.outTransition ? "out" : "in"}`;
+      return "modal-".concat(this.outTransition ? "out" : "in");
     },
     playPauseName() {
       return this.playing ? i("Pause slideshow") : i("Start slideshow");
@@ -466,7 +466,8 @@ const E = A.exports, R = {
       this.focusTrap = w([s, ...this.additionalTrapElements], e), this.focusTrap.activate();
     },
     clearFocusTrap() {
-      this.focusTrap && (this.focusTrap?.deactivate(), this.focusTrap = null);
+      var s;
+      this.focusTrap && ((s = this.focusTrap) == null || s.deactivate(), this.focusTrap = null);
     }
   }
 };
@@ -475,7 +476,7 @@ var I = function() {
   return t("transition", { attrs: { name: "fade", appear: "" }, on: { "after-enter": e.useFocusTrap, "before-leave": e.clearFocusTrap } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], ref: "mask", staticClass: "modal-mask", class: { "modal-mask--dark": e.dark || !e.closeButtonContained || e.hasPrevious || e.hasNext }, style: e.cssVariables, attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": "modal-name-" + e.randId, "aria-describedby": "modal-description-" + e.randId, tabindex: "-1" } }, [t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("div", { staticClass: "modal-header" }, [e.name.trim() !== "" ? t("h2", { staticClass: "modal-name", attrs: { id: "modal-name-" + e.randId } }, [e._v(" " + e._s(e.name) + " ")]) : e._e(), t("div", { staticClass: "icons-menu" }, [e.hasNext && e.enableSlideshow ? t("button", { directives: [{ name: "tooltip", rawName: "v-tooltip.auto", value: e.playPauseName, expression: "playPauseName", modifiers: { auto: !0 } }], staticClass: "play-pause-icons", class: { "play-pause-icons--paused": e.slideshowPaused }, attrs: { type: "button" }, on: { click: e.togglePlayPause } }, [e.playing ? t("Pause", { staticClass: "play-pause-icons__pause", attrs: { size: e.iconSize } }) : t("Play", { staticClass: "play-pause-icons__play", attrs: { size: e.iconSize } }), t("span", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.playPauseName) + " ")]), e.playing ? t("svg", { staticClass: "progress-ring", attrs: { height: "50", width: "50" } }, [t("circle", { staticClass: "progress-ring__circle", attrs: { stroke: "white", "stroke-width": "2", fill: "transparent", r: "15", cx: "25", cy: "25" } })]) : e._e()], 1) : e._e(), t("NcActions", { staticClass: "header-actions", attrs: { inline: e.inlineActions } }, [e._t("actions")], 2), e.canClose && !e.closeButtonContained ? t("NcButton", { staticClass: "header-close", attrs: { "aria-label": e.closeButtonAriaLabel, type: "tertiary" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("Close", { attrs: { size: e.iconSize } })];
   }, proxy: !0 }], null, !1, 1841713362) }) : e._e()], 1)])]), t("transition", { attrs: { name: e.modalTransitionName, appear: "" } }, [t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showModal, expression: "showModal" }], staticClass: "modal-wrapper", class: [
-    `modal-wrapper--${e.size}`,
+    "modal-wrapper--".concat(e.size),
     { "modal-wrapper--spread-navigation": e.spreadNavigation }
   ], on: { mousedown: function(a) {
     return a.target !== a.currentTarget ? null : e.handleClickModalWrapper.apply(null, arguments);
@@ -486,17 +487,17 @@ var I = function() {
   }, proxy: !0 }], null, !1, 2121748766) }) : e._e(), t("div", { staticClass: "modal-container__content" }, [e._t("default")], 2)], 1), t("transition", { attrs: { name: "fade-visibility", appear: "" } }, [t("NcButton", { directives: [{ name: "show", rawName: "v-show", value: e.hasNext, expression: "hasNext" }], staticClass: "next", attrs: { type: "tertiary-no-background", "aria-label": e.nextButtonAriaLabel }, on: { click: e.next }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [t("ChevronRight", { attrs: { size: 40 } })];
   }, proxy: !0 }]) })], 1)], 1)])], 1)]);
-}, V = [], D = /* @__PURE__ */ l(
+}, D = [], V = /* @__PURE__ */ l(
   R,
   I,
-  V,
+  D,
   !1,
   null,
   "1ea9d450",
   null,
   null
 );
-const H = D.exports;
+const H = V.exports;
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
  *