@nextcloud/vue 9.9.0 → 9.10.0

package/dist/assets/NcSelect-CvDEQAjD.css

@@ -1,245 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/*
-* Ensure proper alignment of the vue material icons
-*/
-.material-design-icon {
-  display: flex;
-  align-self: center;
-  justify-self: center;
-  align-items: center;
-  justify-content: center;
-}
-
-/*!
- * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * Similar as inputBorder but without active styles.
- */
-/**
- * Create a consistent border for an input element.
- * With Nextcloud 32+ there is no real border anymore but we use a box-shadow.
- */
-body {
-  /**
-   * Set custom vue-select CSS variables.
-   * Needs to be on the body (not :root) for theming to apply (see nextcloud/server#36462)
-   */
-  /* Search Input */
-  --vs-search-input-color: var(--color-main-text);
-  --vs-search-input-bg: var(--color-main-background);
-  --vs-search-input-placeholder-color: var(--color-text-maxcontrast);
-  /* Font */
-  --vs-font-size: var(--default-font-size);
-  --vs-line-height: var(--default-line-height);
-  /* Disabled State */
-  --vs-state-disabled-bg: var(--color-background-hover);
-  --vs-state-disabled-color: var(--color-text-maxcontrast);
-  --vs-state-disabled-controls-color: var(--color-text-maxcontrast);
-  --vs-state-disabled-cursor: not-allowed;
-  --vs-disabled-bg: var(--color-background-hover);
-  --vs-disabled-color: var(--color-text-maxcontrast);
-  --vs-disabled-cursor: not-allowed;
-  /* Borders */
-  --vs-border-color: var(--color-border-maxcontrast);
-  --vs-border-width: var(--border-width-input, 2px) !important;
-  --vs-border-style: solid;
-  --vs-border-radius: var(--border-radius-element);
-  /* Component Controls: Clear, Open Indicator */
-  --vs-controls-color: var(--color-main-text);
-  /* Selected */
-  --vs-selected-bg: var(--color-background-hover);
-  --vs-selected-color: var(--color-main-text);
-  --vs-selected-border-color: var(--vs-border-color);
-  --vs-selected-border-style: var(--vs-border-style);
-  --vs-selected-border-width: var(--vs-border-width);
-  /* Dropdown */
-  --vs-dropdown-bg: var(--color-main-background);
-  --vs-dropdown-color: var(--color-main-text);
-  --vs-dropdown-z-index: 9999;
-  --vs-dropdown-box-shadow: 0px 2px 2px 0px var(--color-box-shadow);
-  /* Options */
-  --vs-dropdown-option-padding: 8px 20px;
-  /* Active State */
-  --vs-dropdown-option--active-bg: var(--color-background-hover);
-  --vs-dropdown-option--active-color: var(--color-main-text);
-  /* Keyboard Focus State */
-  --vs-dropdown-option--kb-focus-box-shadow: inset 0px 0px 0px 2px var(--vs-border-color);
-  /* Deselect State */
-  --vs-dropdown-option--deselect-bg: var(--color-error);
-  --vs-dropdown-option--deselect-color: #fff;
-  /* Transitions */
-  --vs-transition-duration: 0ms;
-  /* Actions */
-  --vs-actions-padding: 0 8px 0 4px;
-}
-.v-select.select {
-  /* Override default vue-select styles */
-  min-height: calc(var(--default-clickable-area) - 2 * var(--border-width-input));
-  min-width: 260px;
-  margin: 0 0 var(--default-grid-baseline);
-}
-.v-select.select.vs--open {
-  --vs-border-width: var(--border-width-input-focused, 2px);
-}
-.v-select.select .select__label {
-  display: block;
-  margin-bottom: 2px;
-}
-.v-select.select .vs__selected {
-  height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width) - var(--default-grid-baseline));
-  margin: calc(var(--default-grid-baseline) / 2);
-  padding-block: 0;
-  padding-inline: 12px 8px;
-  border-radius: 16px !important;
-  background: var(--color-primary-element-light);
-  border: none;
-}
-.v-select.select.vs--open .vs__selected:first-of-type {
-  margin-inline-start: calc(var(--default-grid-baseline) / 2 - (var(--border-width-input-focused, 2px) - var(--border-width-input, 2px))) !important;
-}
-.v-select.select .vs__search {
-  text-overflow: ellipsis;
-  color: var(--color-main-text);
-  min-height: unset !important;
-  height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width)) !important;
-}
-.v-select.select .vs__search::placeholder {
-  color: var(--color-text-maxcontrast);
-}
-.v-select.select .vs__search, .v-select.select .vs__search:focus {
-  margin: 0;
-}
-.v-select.select .vs__dropdown-toggle {
-  position: relative;
-  max-height: 100px;
-  padding: var(--border-width-input);
-  overflow-y: auto;
-}
-.v-select.select .vs__actions {
-  position: sticky;
-  top: 0;
-}
-.v-select.select .vs__clear {
-  margin-inline-end: 2px;
-}
-.v-select.select.vs--open .vs__dropdown-toggle {
-  border-color: var(--color-main-text);
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-style: solid;
-  border-width: var(--border-width-input-focused);
-  outline: 2px solid var(--color-main-background);
-  padding: 0;
-}
-.v-select.select:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:active,
-.v-select.select:not(.vs--disabled, .vs--open) .vs__dropdown-toggle:focus-within {
-  outline: 2px solid var(--color-main-background);
-  border-color: var(--color-main-text);
-}
-.v-select.select.vs--disabled .vs__search,
-.v-select.select.vs--disabled .vs__selected {
-  color: var(--color-text-maxcontrast);
-}
-.v-select.select.vs--disabled .vs__clear,
-.v-select.select.vs--disabled .vs__deselect {
-  display: none;
-}
-.v-select.select--no-wrap .vs__selected-options {
-  flex-wrap: nowrap;
-  overflow: auto;
-  min-width: unset;
-}
-.v-select.select--no-wrap .vs__selected-options .vs__selected {
-  min-width: unset;
-}
-.v-select.select--drop-up.vs--open .vs__dropdown-toggle {
-  border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
-  border-top-color: transparent;
-  border-bottom-color: var(--color-main-text);
-}
-.v-select.select .vs__selected-options {
-  min-height: calc(var(--default-clickable-area) - 2 * var(--vs-border-width));
-}
-.v-select.select .vs__selected-options .vs__selected ~ .vs__search[readonly] {
-  position: absolute;
-}
-.v-select.select .vs__selected-options {
-  padding: 0 5px;
-}
-.v-select.select.vs--single.vs--loading .vs__selected, .v-select.select.vs--single.vs--open .vs__selected {
-  max-width: 100%;
-  opacity: 1;
-  color: var(--color-text-maxcontrast);
-}
-.v-select.select.vs--single .vs__selected-options {
-  flex-wrap: nowrap;
-}
-.v-select.select.vs--single .vs__selected {
-  background: unset !important;
-}
-.vs__dropdown-toggle {
-  --input-border-box-shadow-light: 0 -1px var(--vs-border-color),
-  	0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);
-  --input-border-box-shadow-dark: 0 1px var(--vs-border-color),
-  	0 0 0 1px color-mix(in srgb, var(--vs-border-color), 65% transparent);
-  --input-border-box-shadow: var(--input-border-box-shadow-light);
-  border: none;
-  border-radius: var(--border-radius-element);
-  box-shadow: var(--input-border-box-shadow);
-}
-.vs__dropdown-toggle:hover:not([disabled]) {
-  box-shadow: 0 0 0 1px var(--vs-border-color);
-}
-@media (prefers-color-scheme: dark) {
-.vs__dropdown-toggle .vs__dropdown-toggle {
-    --input-border-box-shadow: var(--input-border-box-shadow-dark);
-}
-}
-[data-theme-dark] .vs__dropdown-toggle {
-  --input-border-box-shadow: var(--input-border-box-shadow-dark);
-}
-[data-theme-light] .vs__dropdown-toggle {
-  --input-border-box-shadow: var(--input-border-box-shadow-light);
-}
-.select--legacy .vs__dropdown-toggle {
-  box-shadow: 0 0 0 1px var(--vs-border-color);
-}
-.select--legacy .vs__dropdown-toggle:hover:not([disabled]) {
-  box-shadow: 0 0 0 2px var(--vs-border-color);
-}
-.vs__dropdown-menu {
-  border-width: var(--border-width-input-focused) !important;
-  border-color: var(--color-main-text) !important;
-  outline: none !important;
-  box-shadow: -2px 0 0 var(--color-main-background), 0 2px 0 var(--color-main-background), 2px 0 0 var(--color-main-background), !important;
-  padding: 4px !important;
-}
-.vs__dropdown-menu--floating {
-  /* Fallback styles overidden by programmatically set inline styles */
-  width: max-content;
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-}
-.vs__dropdown-menu--floating-placement-top {
-  border-radius: var(--vs-border-radius) var(--vs-border-radius) 0 0 !important;
-  border-top-style: var(--vs-border-style) !important;
-  border-bottom-style: none !important;
-  box-shadow: 0 -2px 0 var(--color-main-background), -2px 0 0 var(--color-main-background), 2px 0 0 var(--color-main-background), !important;
-}
-.vs__dropdown-menu .vs__dropdown-option {
-  border-radius: 6px !important;
-}
-.vs__dropdown-menu .vs__no-options {
-  color: var(--color-text-maxcontrast) !important;
-}

package/dist/assets/NcSelectUsers-YF5729PJ.css

@@ -1,4 +0,0 @@
-
-.nc-select-users[data-v-e8e18fd3] .vs__selected {
-	padding-inline: 0 5px !important;
-}

package/dist/chunks/ArrowRight-B1ncAhus.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArrowRight-B1ncAhus.mjs","sources":["../../node_modules/vue-material-design-icons/ArrowRight.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon arrow-right-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=\"M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ArrowRightIcon\",\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>"],"names":["_createElementBlock","_mergeProps","_createElementVNode","_openBlock"],"mappings":";;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAA,aAAA,EAAA,GAAE,0EAAyE;;;sBAXrFA,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFP,YAEO;AAAA,QADQ,OAAA,SAAbC,UAAA,GAAAH,mBAAuC,qCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/ChevronDown-C6gc637b.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChevronDown-C6gc637b.mjs","sources":["../../node_modules/vue-material-design-icons/ChevronDown.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon chevron-down-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=\"M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ChevronDownIcon\",\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>"],"names":["_createElementBlock","_mergeProps","_createElementVNode","_openBlock"],"mappings":";;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAA,aAAA,EAAA,GAAE,6DAA4D;;;sBAXxEA,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFP,YAEO;AAAA,QADQ,OAAA,SAAbC,UAAA,GAAAH,mBAAuC,qCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/ChevronUp-ChH8oB7p.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChevronUp-ChH8oB7p.mjs","sources":["../../node_modules/vue-material-design-icons/ChevronUp.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon chevron-up-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=\"M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"ChevronUpIcon\",\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>"],"names":["_createElementBlock","_mergeProps","_createElementVNode","_openBlock"],"mappings":";;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAA,aAAA,EAAA,GAAE,+DAA8D;;;sBAX1EA,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFP,YAEO;AAAA,QADQ,OAAA,SAAbC,UAAA,GAAAH,mBAAuC,qCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/Close-CuhcJnX2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"Close-CuhcJnX2.mjs","sources":["../../node_modules/vue-material-design-icons/Close.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : 'true'\"\n        :aria-label=\"title\"\n        class=\"material-design-icon close-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=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"CloseIcon\",\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>"],"names":["_createElementBlock","_mergeProps","_createElementVNode","_openBlock"],"mappings":";;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO,CAAC,OAAO;AAAA,EACf,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA;IAER,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;IAEX,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA,EACF;AACF;;;AAxBY,MAAA,aAAA,EAAA,GAAE,gHAA+G;;;sBAX3HA,mBAeO,QAfPC,WAAc,KAAA,QAAM;AAAA,IACb,eAAa,OAAA,QAAK,OAAA;AAAA,IAClB,cAAY,OAAA;AAAA,IACb,OAAM;AAAA,IACN,MAAK;AAAA,IACJ,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,SAAU,MAAM;AAAA;kBACjCD,mBAQM,OAAA;AAAA,MARA,MAAM,OAAA;AAAA,MACP,OAAM;AAAA,MACL,OAAO,OAAA;AAAA,MACP,QAAQ,OAAA;AAAA,MACT,SAAQ;AAAA;MACXE,mBAEO,QAFP,YAEO;AAAA,QADQ,OAAA,SAAbC,UAAA,GAAAH,mBAAuC,qCAAhB,OAAA,KAAK,GAAA,CAAA;;;;;;","x_google_ignoreList":[0]}

package/dist/chunks/NcActionButton-BO5T5ePT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionButton-BO5T5ePT.mjs","sources":["../../src/components/NcActionButton/NcActionButton.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :close-after-click=\"true\" @click=\"showMessage('Delete and close menu')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete and close\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :is-menu=\"true\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCreate\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton :disabled=\"true\" @click=\"showMessage('Disabled')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDisabled button\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconTrashCanOutline,\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n```\n\nIf you're using a long text, you can specify a `name` prop.\n\nFor the same purpose, but in a more compact way, `description` prop can be used.\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton name=\"Long button\" @click=\"showMessage('Delete')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconTrashCanOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis button is associated with a very long text.\\nAnd with new lines too.\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton description=\"Subline description for the button\" @click=\"showMessage('Edit')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tEdit\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconTrashCanOutline,\n\t\t\tIconPencilOutline,\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nAction icon attribute with a single action\n\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd new\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t\tmethods: {\n\t\t\tshowMessage(msg) {\n\t\t\t\talert(msg)\n\t\t\t},\n\t\t},\n\t}\n\t</script>\n\n```\n\nYou can also use a custom icon, for example from the vue-material-design-icons library:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackLeftOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise left hand\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackRightOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise right hand\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'\nimport IconHandBackRightOutline from 'vue-material-design-icons/HandBackRightOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconHandBackLeftOutline,\n\t\tIconHandBackRightOutline,\n\t},\n}\n</script>\n```\n\n### With different model behavior\nBy default the button will act like a normal button, but it is also possible to change the behavior to a toggle button, checkbox button or radio button.\n\nFor example to have the button act like a toggle button just set the `modelValue` property to the toggle state:\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"fullscreen\">\n\t\t\t<template #icon>\n\t\t\t\t<IconFullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t}\n\t},\n}\n</script>\n```\n\nAnother example would be using it with checkbox semantics, to enable or disable features.\nThis also allows tri-state behavior (`true`, `false`, `null`) in which case `aria-checked` will be either `true`, `false` or `mixed`.\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton v-model=\"handRaised\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<IconHandBackLeftOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\tRaise hand\n\t\t</NcActionButton>\n\t\t<NcActionButton v-model=\"fullscreen\" type=\"checkbox\">\n\t\t\t<template #icon>\n\t\t\t\t<IconFullscreen :size=\"20\" />\n\t\t\t</template>\n\t\t\tFullscreen\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport IconHandBackLeftOutline from 'vue-material-design-icons/HandBackLeftOutline.vue'\nimport IconFullscreen from 'vue-material-design-icons/Fullscreen.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconHandBackLeftOutline,\n\t\tIconFullscreen,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tfullscreen: true,\n\t\t\thandRaised: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nIt is also possible to use the button with radio semantics, this is only possible in menus and not for inline actions!\n\nWith a string `modelValue`, checked state is determined by the `value` property and updates `modelValue` with the new `value` string.\n\nWith a boolean `modelValue`, checked state is determined by `modelValue` and updates to `true` on check.\n\nNote: unlike native radio buttons, `NcActionButton` are not grouped by name, so you need to connect them by bind correct `modelValue``.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"cash\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCash :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay with cash\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-model=\"payment\" type=\"radio\" value=\"card\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconCreditCardOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPay by card\n\t\t\t</NcActionButton>\n\t\t\t<NcActionSeparator />\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isLeft\" @update:modelValue=\"setAlign('Left', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignLeft :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tLeft\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isCenter\" @update:modelValue=\"setAlign('Center', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignCenter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tCenter\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton type=\"radio\" :model-value=\"align.isRight\" @update:modelValue=\"setAlign('Right', $event)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFormatAlignRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRight\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t\t<p>payment = \"{{ payment }}\"</p>\n\t\t<p>align.isLeft = {{ align.isLeft }}</p>\n\t\t<p>align.isCenter = {{ align.isCenter }}</p>\n\t\t<p>align.isRight = {{ align.isRight }}</p>\n\t</div>\n</template>\n<script>\nimport IconCash from 'vue-material-design-icons/Cash.vue'\nimport IconCreditCardOutline from 'vue-material-design-icons/CreditCardOutline.vue'\nimport IconFormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport IconFormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport IconFormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconCash,\n\t\tIconCreditCardOutline,\n\t\tIconFormatAlignLeft,\n\t\tIconFormatAlignCenter,\n\t\tIconFormatAlignRight,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tpayment: 'card',\n\t\t\talign: {\n\t\t\t\tisLeft: false,\n\t\t\t\tisCenter: true,\n\t\t\t\tisRight: false,\n\t\t\t},\n\t\t}\n\t},\n\tmethods: {\n\t\tsetAlign(direction, value) {\n\t\t\tthis.align.isLeft = false\n\t\t\tthis.align.isCenter = false\n\t\t\tthis.align.isRight = false\n\t\t\tthis.align[`is${direction}`] = value\n\t\t},\n\t}\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<button\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\tclass=\"action-button button-vue\"\n\t\t\t:class=\"{\n\t\t\t\t'action-button--active': isChecked,\n\t\t\t\tfocusable: isFocusable,\n\t\t\t}\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:title=\"title\"\n\t\t\t:type=\"nativeType\"\n\t\t\tv-bind=\"buttonAttributes\"\n\t\t\t@click=\"handleClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-button__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-button__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span class=\"action-button__longtext-wrapper\">\n\t\t\t\t<strong\n\t\t\t\t\tv-if=\"name\"\n\t\t\t\t\tclass=\"action-button__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"isLongText\"\n\t\t\t\t\tclass=\"action-button__longtext\"\n\t\t\t\t\tv-text=\"text\" />\n\t\t\t\t<!-- default text display -->\n\t\t\t\t<span\n\t\t\t\t\tv-else\n\t\t\t\t\tclass=\"action-button__text\">\n\t\t\t\t\t{{ text }}\n\t\t\t\t</span>\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"description\"\n\t\t\t\t\tclass=\"action-button__description\"\n\t\t\t\t\tv-text=\"description\" />\n\t\t\t</span>\n\n\t\t\t<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"isMenu\"\n\t\t\t\tclass=\"action-button__menu-icon\"\n\t\t\t\tdirectional\n\t\t\t\t:path=\"mdiChevronRight\" />\n\t\t\t<NcIconSvgWrapper v-else-if=\"isChecked\" :path=\"mdiCheck\" class=\"action-button__pressed-icon\" />\n\n\t\t\t<span v-else-if=\"isChecked === false\" class=\"action-button__pressed-icon material-design-icon\" />\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport { mdiCheck, mdiChevronRight } from '@mdi/js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * Button component to be used in Actions\n */\nexport default {\n\tname: 'NcActionButton',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * disabled state of the action button\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 * If this is a menu, a chevron icon will\n\t\t * be added at the end of the line\n\t\t */\n\t\tisMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The button's behavior, by default the button acts like a normal button with optional toggle button behavior if `modelValue` is `true` or `false`.\n\t\t * But you can also set to checkbox button behavior with tri-state or radio button like behavior.\n\t\t * This extends the native HTML button type attribute.\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t\tvalidator: (behavior) => ['button', 'checkbox', 'radio', 'reset', 'submit'].includes(behavior),\n\t\t},\n\n\t\t/**\n\t\t * The buttons state if `type` is 'checkbox' or 'radio' (meaning if it is pressed / selected).\n\t\t * For checkbox and toggle button behavior - boolean value.\n\t\t * For radio button behavior - could be a boolean checked or a string with the value of the button.\n\t\t * Note: Unlike native radio buttons, NcActionButton are not grouped by name, so you need to connect them by bind correct modelValue.\n\t\t *\n\t\t *  **This is not availabe for `type='submit'` or `type='reset'`**\n\t\t *\n\t\t * If using `type='checkbox'` a `model-value` of `true` means checked, `false` means unchecked and `null` means indeterminate (tri-state)\n\t\t * For `type='radio'` `null` is equal to `false`\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value used for the `modelValue` when this component is used with radio behavior\n\t\t * Similar to the `value` attribute of `<input type=\"radio\">`\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Small underlying text content of the entry\n\t\t */\n\t\tdescription: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['update:modelValue'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tmdiCheck,\n\t\t\tmdiChevronRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\t/**\n\t\t * The current \"checked\" or \"pressed\" state for the model behavior\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.type === 'radio' && typeof this.modelValue !== 'boolean') {\n\t\t\t\treturn this.modelValue === this.value\n\t\t\t}\n\t\t\treturn this.modelValue\n\t\t},\n\n\t\t/**\n\t\t * The native HTML type to set on the button\n\t\t */\n\t\tnativeType() {\n\t\t\tif (this.type === 'submit' || this.type === 'reset') {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn 'button'\n\t\t},\n\n\t\t/**\n\t\t * HTML attributes to bind to the <button>\n\t\t */\n\t\tbuttonAttributes() {\n\t\t\tconst attributes = {}\n\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\t// By default it needs to be a menu item in semantic menus\n\t\t\t\tattributes.role = 'menuitem'\n\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tattributes.role = 'menuitemradio'\n\t\t\t\t\tattributes['aria-checked'] = this.isChecked ? 'true' : 'false'\n\t\t\t\t} else if (this.type === 'checkbox' || (this.nativeType === 'button' && this.modelValue !== null)) {\n\t\t\t\t\t// either if checkbox behavior was set or the model value is not unset\n\t\t\t\t\tattributes.role = 'menuitemcheckbox'\n\t\t\t\t\tattributes['aria-checked'] = this.modelValue === null ? 'mixed' : (this.modelValue ? 'true' : 'false')\n\t\t\t\t}\n\t\t\t} else if (this.modelValue !== null && this.nativeType === 'button') {\n\t\t\t\t// In case this has a modelValue it is considered a toggle button, so we need to set the aria-pressed\n\t\t\t\tattributes['aria-pressed'] = this.modelValue ? 'true' : 'false'\n\t\t\t}\n\n\t\t\treturn attributes\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Forward click event, let mixin handle the close-after-click and emit new modelValue if needed\n\t\t *\n\t\t * @param {MouseEvent} event - The click event\n\t\t */\n\t\thandleClick(event) {\n\t\t\tthis.onClick(event)\n\t\t\t// If modelValue or type is set (so modelValue might be null for tri-state) we need to update it\n\t\t\tif (this.modelValue !== null || this.type !== 'button') {\n\t\t\t\tif (this.type === 'radio') {\n\t\t\t\t\tif (typeof this.modelValue !== 'boolean') {\n\t\t\t\t\t\t// String-value radios behavior is similar to native - click on checked radio does nothing\n\t\t\t\t\t\tif (!this.isChecked) {\n\t\t\t\t\t\t\tthis.$emit('update:modelValue', this.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Boolean radio allows to uncheck\n\t\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Checkbox toggles value\n\t\t\t\t\tthis.$emit('update:modelValue', !this.isChecked)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('button');\n\n.action-button {\n\t&__pressed-icon {\n\t\tmargin-inline: auto calc($icon-margin * -1);\n\t}\n\n\t* {\n\t\tcursor: pointer;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_renderSlot","_normalizeStyle","_toDisplayString","_createBlock","_openBlock"],"mappings":"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"}

package/dist/chunks/NcActionButtonGroup-Dd03Oluy.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionButtonGroup-Dd03Oluy.mjs","sources":["../../src/components/NcActionButtonGroup/NcActionButtonGroup.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots,\nto group buttons as one visual action, like for text alignment.\nThis should be used sparingly for accessibility.\n\n```vue\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionButtonGroup name=\"Text alignment\">\n\t\t\t\t<NcActionButton aria-label=\"Align left\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"l\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalLeft :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align center\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"c\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalCenter :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton aria-label=\"Align right\"\n\t\t\t\t\tv-model=\"alignment\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tvalue=\"r\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconAlignHorizontalRight :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActionButtonGroup>\n\t\t\t<NcActionButton :close-after-click=\"true\"\n\t\t\t\t@click=\"showMessage('Some other action')\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSome other action\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport IconAlignHorizontalLeft from 'vue-material-design-icons/AlignHorizontalLeft.vue'\nimport IconAlignHorizontalRight from 'vue-material-design-icons/AlignHorizontalRight.vue'\nimport IconAlignHorizontalCenter from 'vue-material-design-icons/AlignHorizontalCenter.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconAlignHorizontalLeft,\n\t\tIconAlignHorizontalRight,\n\t\tIconAlignHorizontalCenter,\n\t\tIconPlus,\n\t},\n\tdata() {\n\t\treturn { alignment: 'l' }\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"nc-button-group-base\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<div v-if=\"name\" :id=\"labelId\">\n\t\t\t{{ name }}\n\t\t</div>\n\t\t<ul class=\"nc-button-group-content\" role=\"group\" :aria-labelledby=\"name ? labelId : undefined\">\n\t\t\t<slot />\n\t\t</ul>\n\t</li>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\n/**\n * A wrapper for allowing inlining NcAction components within the action menu\n */\nexport default defineComponent({\n\tname: 'NcActionButtonGroup',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Optional text shown below the button group\n\t\t */\n\t\tname: {\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tlabelId: createElementId(),\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t},\n})\n</script>\n\n<style lang=\"scss\" scoped>\n.nc-button-group-base {\n\t>div {\n\t\ttext-align: center;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\tul.nc-button-group-content {\n\t\tdisplay: flex;\n\t\tgap: 4px; // required for the focus-visible outline\n\t\tjustify-content: space-between;\n\t\t:slotted(li) {\n\t\t\tflex: 1 1;\n\t\t}\n\n\t\t:deep(.action-button) {\n\t\t\t// Fix action buttons beeing shifted to the left (right padding)\n\t\t\tpadding: 0 !important;\n\t\t\twidth: 100%;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\n\t\t\t&.action-button--active {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\n\t\t\t\t&:hover, &:focus, &:focus-within {\n\t\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.action-button__pressed-icon {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;AAgGA,MAAK,YAAa,gBAAa;AAAA,EAC9B,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,QAAQ;AACP,WAAO;AAAA,MACN,SAAS,gBAAe;AAAA,IACzB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR;AAAA;AAEF,CAAC;;;;;sBAjDAA,mBAOK,MAAA;AAAA,IAPD,OAAM;AAAA,IAAwB,MAAM,KAAA,oBAAgB;AAAA;IAC5C,KAAA,qBAAXA,mBAEM,OAAA;AAAA;MAFY,IAAI,KAAA;AAAA,uBAClB,KAAA,IAAI,GAAA,GAAA,UAAA;IAERC,mBAEK,MAAA;AAAA,MAFD,OAAM;AAAA,MAA0B,MAAK;AAAA,MAAS,mBAAiB,KAAA,OAAO,KAAA,UAAU;AAAA;MACnFC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;;"}

package/dist/chunks/NcActionCaption-f7L9gBlT.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionCaption-f7L9gBlT.mjs","sources":["../../src/components/NcActionCaption/NcActionCaption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCaption name=\"Test caption\" />\n\t\t<NcActionCaption name=\"Test caption 2\" />\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"app-navigation-caption\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t{{ name }}\n\t</li>\n</template>\n\n<script>\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionCaption',\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The caption's text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\t.app-navigation-caption {\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tuser-select: none;\n\t\tpointer-events: none;\n\t\tmargin-inline-start: 12px;\n\t\tpadding-inline-end: 14px;\n\t\theight: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n</style>\n"],"names":["_createElementBlock"],"mappings":";;;AAyBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;AAGb;;;sBA3BCA,mBAEK,MAAA;AAAA,IAFD,OAAM;AAAA,IAA0B,MAAM,SAAA,oBAAgB;AAAA,qBACtD,OAAA,IAAI,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcActionCheckbox-DBqiK-AZ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionCheckbox-DBqiK-AZ.mjs","sources":["../../src/components/NcActionCheckbox/NcActionCheckbox.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```vue\n\t<NcActions>\n\t\t<NcActionCheckbox @change=\"console.log('(un)checked !')\">First choice</NcActionCheckbox>\n\t\t<NcActionCheckbox value=\"second\" @change=\"console.log('(un)checked !')\">Second choice</NcActionCheckbox>\n\t\t<NcActionCheckbox :model-value=\"true\" @change=\"console.log('(un)checked !')\">Third choice (checked)</NcActionCheckbox>\n\t\t<NcActionCheckbox :disabled=\"true\" @change=\"console.log('(un)checked !')\">Second choice (disabled)</NcActionCheckbox>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<label class=\"action-checkbox\" :role=\"isInSemanticMenu && 'menuitemcheckbox'\" :aria-checked=\"isInSemanticMenu && model.toString()\">\n\t\t\t<span class=\"action-checkbox__icon\">\n\t\t\t\t<input\n\t\t\t\t\t:id\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tclass=\"action-checkbox__input\"\n\t\t\t\t\t:class=\"{ focusable: !disabled }\"\n\t\t\t\t\t:value\n\t\t\t\t\t:disabled\n\t\t\t\t\t@change=\"onChange\">\n\t\t\t\t<NcIconSvgWrapper :path=\"model ? mdiCheckboxMarked : mdiCheckboxBlankOutline\" :size=\"20\" />\n\t\t\t</span>\n\t\t\t<span class=\"action-checkbox__text\">{{ text }}</span>\n\t\t</label>\n\t</li>\n</template>\n\n<script>\nimport { mdiCheckboxBlankOutline, mdiCheckboxMarked } from '@mdi/js'\nimport { useModel } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionCheckbox',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the the checkbox element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * value of the checkbox input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the checkbox element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t/** Native change event */\n\t\t'change',\n\t\t/** Checkbox is checked */\n\t\t'check',\n\t\t/** Checkbox is unchecked */\n\t\t'uncheck',\n\t\t/** Model value changed */\n\t\t'update:modelValue',\n\t],\n\n\tsetup(props) {\n\t\tconst model = useModel(props, 'modelValue')\n\t\treturn {\n\t\t\tmodel,\n\t\t\tmdiCheckboxBlankOutline,\n\t\t\tmdiCheckboxMarked,\n\t\t}\n\t},\n\n\tmethods: {\n\t\tonChange(event) {\n\t\t\tthis.$emit('change', event)\n\t\t\tif (event.target.checked) {\n\t\t\t\tthis.$emit('check')\n\t\t\t} else {\n\t\t\t\tthis.$emit('uncheck')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('checkbox');\n\n.action:has(:focus-visible) {\n\toutline: 2px solid currentColor;\n}\n\n.action-checkbox {\n\t&__icon {\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&__input {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmargin: auto;\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","_toDisplayString"],"mappings":";;;;;;;AA8CA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,iBAAiB;AAAA,EAE1B,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,YAAY,gBAAe;AAAA,MAC1C,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA,IAEN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;EAGD,MAAM,OAAO;AACZ,UAAM,QAAQ,SAAS,OAAO,YAAY;AAC1C,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,SAAS,OAAO;AACf,WAAK,MAAM,UAAU,KAAK;AAC1B,UAAI,MAAM,OAAO,SAAS;AACzB,aAAK,MAAM,OAAO;AAAA,MACnB,OAAO;AACN,aAAK,MAAM,SAAS;AAAA,MACrB;AAAA,IACD;AAAA;AAEF;;;AA1GS,MAAA,aAAA,EAAA,OAAM,wBAAuB;;AAY7B,MAAA,aAAA,EAAA,OAAM,wBAAuB;;;sBAdrCA,mBAgBK,MAAA;AAAA,IAhBD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBAcQ,SAAA;AAAA,MAdD,OAAM;AAAA,MAAmB,MAAM,SAAA,oBAAgB;AAAA,MAAyB,gBAAc,SAAA,oBAAoB,OAAA,MAAM,SAAQ;AAAA;MAC9HA,mBAWO,QAXP,YAWO;AAAA,uBAVNA,mBAQoB,SAAA;AAAA,UAPlB,IAAA,OAAA;AAAA,uEACQ,OAAA,QAAK;AAAA,UACd,MAAK;AAAA,UACL,OAAKD,eAAA,CAAC,0BAAwB,EAAA,WAAA,CACR,OAAA,SAAQ,CAAA,CAAA;AAAA,UAC7B,OAAA,OAAA;AAAA,UACA,UAAA,OAAA;AAAA,UACA,iDAAQ,SAAA,YAAA,SAAA,SAAA,GAAA,IAAA;AAAA;2BANA,OAAA,KAAK;AAAA;QAOfE,YAA2F,6BAAA;AAAA,UAAxE,MAAM,OAAA,QAAQ,OAAA,oBAAoB,OAAA;AAAA,UAA0B,MAAM;AAAA;;MAEtFD,mBAAqD,QAArD,YAAqDE,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;"}

package/dist/chunks/NcActionInput-Dr8Yrafu.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionInput-Dr8Yrafu.mjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput v-model=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput v-model=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconKeyOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" v-model=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconKeyOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" v-model=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconEyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" v-model=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" label=\"Native date picker\" isNativePicker v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" v-model=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\t:options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tinput-label=\"Fruit selection\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:append-to-body=\"true\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport IconClose from 'vue-material-design-icons/Close.vue'\n\timport IconEyedropper from 'vue-material-design-icons/Eyedropper.vue'\n\timport IconKeyOutline from 'vue-material-design-icons/KeyOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconClose,\n\t\t\tIconEyedropper,\n\t\t\tIconKeyOutline,\n\t\t\tIconPencilOutline,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\tdate: new Date(),\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"[{ 'action--disabled': disabled }, $props.class]\">\n\t\t<span\n\t\t\tclass=\"action-input\"\n\t\t\t:class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\"\n\t\t\t\t\t\t:class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form\n\t\t\t\tref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label\n\t\t\t\t\t\tv-if=\"label && labelOutside && !isNativePicker\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside }\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker\n\t\t\t\t\t\t\tv-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:inputClass=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tappendToBody\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative\n\t\t\t\t\t\t\tv-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcSelect\n\t\t\t\t\t\t\tv-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:appendToBody=\"false\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<NcPasswordField\n\t\t\t\t\t\t\tv-else-if=\"type === 'password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:labelOutside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:showTrailingButton=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\tv-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside }\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker\n\t\t\t\t\t\t\t\t\tid=\"inputId\"\n\t\t\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t\t\t\t:style=\"{ 'background-color': modelValue }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField\n\t\t\t\t\t\t\tv-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:modelValue=\"modelValue\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:labelOutside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:inputClass=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailingButtonIcon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailingButtonLabel=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:showTrailingButton=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@trailingButtonClick=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@update:modelValue=\"onUpdateModelValue\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { defineAsyncComponent } from 'vue'\nimport { t } from '../../l10n.ts'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.ts'\nimport NcPasswordField from '../NcPasswordField/index.ts'\nimport NcTextField from '../NcTextField/index.ts'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcTextField,\n\t\t// Lazy load components with more than 50kB bundle size impact\n\t\tNcColorPicker: defineAsyncComponent(() => import('../NcColorPicker/index.ts')),\n\t\tNcDateTimePicker: defineAsyncComponent(() => import('../NcDateTimePicker/index.js')),\n\t\tNcSelect: defineAsyncComponent(() => import('../NcSelect/index.js')),\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn [\n\t\t\t\t\t'date',\n\t\t\t\t\t'datetime-local',\n\t\t\t\t\t'month',\n\t\t\t\t\t'multiselect',\n\t\t\t\t\t'number',\n\t\t\t\t\t'password',\n\t\t\t\t\t'search',\n\t\t\t\t\t'tel',\n\t\t\t\t\t'text',\n\t\t\t\t\t'time',\n\t\t\t\t\t'url',\n\t\t\t\t\t'week',\n\t\t\t\t\t'color',\n\t\t\t\t\t'email',\n\t\t\t\t].includes(type)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of 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 * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'submit',\n\t\t'update:modelValue',\n\t],\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\tcase 'week':\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\t\tcase 'date':\n\t\t\t\t\tcase 'month':\n\t\t\t\t\tcase 'time':\n\t\t\t\t\t\treturn this.type\n\n\t\t\t\t\tcase 'datetime-local':\n\t\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tonUpdateModelValue(event) {\n\t\t\t/**\n\t\t\t * Emitted on update of the model value\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/inputs.scss';\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: var(--font-weight-default, normal);\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t// Keep padding to define the width to assure correct position of a possible text\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__container {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-element);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tinset-inline-start: 0;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t\tz-index: -1;\n\t\t\topacity: 0;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: calc($icon-margin - $input-margin);\n}\n\n</style>\n"],"names":["NcTextField","_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_openBlock","_createBlock","_mergeProps","_createVNode"],"mappings":"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"}

package/dist/chunks/NcActionLink-BFiaYt9A.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionLink-BFiaYt9A.mjs","sources":["../../src/components/NcActionLink/NcActionLink.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\n```\n<template>\n\t<div style=\"display: flex; align-items: center;\">\n\t\t<NcActions>\n\t\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconOpenInNew :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tNextcloud website\n\t\t\t</NcActionLink>\n\t\t</NcActions>\n\n\t\t<NcActions>\n\t\t\t<NcActionLink href=\"https://www.gnu.org/licenses/gpl.odt\"\n\t\t\t\t  download=\"AGPL License text.odt\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconDownloadOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDownload AGPL license text\n\t\t\t</NcActionLink>\n\t\t</NcActions>\n\n\t\t<NcActions>\n\t\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconOpenInNew :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tNextcloud website\n\t\t\t</NcActionLink>\n\t\t\t<NcActionLink href=\"https://www.gnu.org/licenses/gpl.odt\"\n\t\t\t\t  download=\"AGPL License text.odt\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconDownloadOutline :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDownload AGPL license text\n\t\t\t</NcActionLink>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport IconDownloadOutline from 'vue-material-design-icons/DownloadOutline.vue'\nimport IconOpenInNew from 'vue-material-design-icons/OpenInNew.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconDownloadOutline,\n\t\tIconOpenInNew,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<a\n\t\t\t:download=\"download\"\n\t\t\t:href=\"href\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:target=\"target\"\n\t\t\t:title=\"title\"\n\t\t\tclass=\"action-link focusable\"\n\t\t\trel=\"nofollow noreferrer noopener\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\t@click=\"onClick\">\n\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-link__icon\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-link__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span\n\t\t\t\tv-if=\"name\"\n\t\t\t\tclass=\"action-link__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-link__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-link__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span\n\t\t\t\tv-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-link__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-link__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</a>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionLink',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * destionation to link to\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator: (value) => {\n\t\t\t\t// href is either an anchor or a valid url starting with a scheme or a relative path\n\t\t\t\ttry {\n\t\t\t\t\treturn new URL(value)\n\t\t\t\t} catch {\n\t\t\t\t\treturn value.startsWith('#') || value.startsWith('/')\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * download the link instead of opening\n\t\t */\n\t\tdownload: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * target to open the link\n\t\t */\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '_self',\n\t\t\tvalidator: (value) => {\n\t\t\t\treturn value && (!value.startsWith('_') || ['_blank', '_self', '_parent', '_top'].indexOf(value) > -1)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Declares a native tooltip when not null\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action-item('link');\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_openBlock","_toDisplayString"],"mappings":";;;;AAqHA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,UAAU;AAErB,YAAI;AACH,iBAAO,IAAI,IAAI,KAAK;AAAA,QACrB,QAAQ;AACP,iBAAO,MAAM,WAAW,GAAG,KAAK,MAAM,WAAW,GAAG;AAAA,QACrD;AAAA,MACD;AAAA;;;;IAMD,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,UAAU;AACrB,eAAO,UAAU,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,SAAS,WAAW,MAAM,EAAE,QAAQ,KAAK,IAAI;AAAA,MACpG;AAAA;;;;IAMD,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;;AAGZ;;;;;EAvFI,OAAM;;AACE,MAAA,aAAA,EAAA,OAAM,oBAAmB;;;;;EAkBrB,OAAM;;;sBA3CrBA,mBAgDK,MAAA;AAAA,IAhDD,OAAM;AAAA,IAAU,MAAM,SAAA,oBAAgB;AAAA;IACzCC,mBA8CI,KAAA;AAAA,MA7CF,UAAU,OAAA;AAAA,MACV,MAAM,OAAA;AAAA,MACN,cAAY,KAAA;AAAA,MACZ,QAAQ,OAAA;AAAA,MACR,OAAO,OAAA;AAAA,MACR,OAAM;AAAA,MACN,KAAI;AAAA,MACH,MAAM,SAAA,oBAAgB;AAAA,MACtB,gDAAO,KAAA,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAGRC,WAMO,yBANP,MAMO;AAAA,QALND,mBAImE,QAAA;AAAA,UAHlE,eAAY;AAAA,UACZ,OAAKE,eAAA,CAAC,qBAAmB,CAChB,KAAA,uCAAuC,KAAA,IAAI,CAAA,CAAA;AAAA,UACnD,OAAKC,eAAA,EAAA,iBAAqB,KAAA,YAAS,OAAU,KAAA,IAAI,MAAA,KAAA,CAAA;AAAA;;MAK7C,KAAA,QADPC,aAAAL,mBAUO,QAVP,YAUO;AAAA,QAPNC,mBAES,UAFT,YAESK,gBADL,KAAA,IAAI,GAAA,CAAA;AAAA,kCAERL,mBAAI,MAAA,MAAA,MAAA,EAAA;AAAA,QAGJA,mBAAoD,QAAA;AAAA,UAA9C,OAAM;AAAA,UAAwB,aAAAK,gBAAa,KAAL,IAAI;AAAA;YAOrC,KAAA,2BADZN,mBAGiB,QAAA;AAAA;QADhB,OAAM;AAAA,QACN,aAAAM,gBAAa,KAAL,IAAI;AAAA,+CAGbN,mBAAwD,QAAxD,YAAwDM,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;;"}

package/dist/chunks/NcActionRadio-BA08CAtA.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionRadio-BA08CAtA.mjs","sources":["../../src/components/NcActionRadio/NcActionRadio.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\nUsually, you will provide a name prop to bind the radio together.\nSo that only one of each name set can be selected at the same time.\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions>\n\t\t\t<NcActionRadio v-for=\"option in radioOptions\"\n\t\t\t\t:key=\"option.value\"\n\t\t\t\t:value=\"option.value\"\n\t\t\t\t:disabled=\"option.disabled\"\n\t\t\t\tname=\"uniqueId\"\n\t\t\t\tv-model=\"radioValue\">\n\t\t\t\t{{ option.label }}\n\t\t\t</NcActionRadio>\n\t\t</NcActions>\n\t\t<span>Selected value: {{ radioValue }}</span>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tradioOptions: [\n\t\t\t\t\t{ value: 'first', label: 'First choise', disabled: false },\n\t\t\t\t\t{ value: 'second', label: 'Second choise', disabled: false },\n\t\t\t\t\t{ value: 'third', label: 'Third choise', disabled: false },\n\t\t\t\t\t{ value: 'fourth', label: 'Fourth choise (disabled)', disabled: true },\n\t\t\t\t],\n\t\t\t\tradioValue: 'first',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<label class=\"action-radio\" :role=\"isInSemanticMenu && 'menuitemradio'\" :aria-checked=\"isInSemanticMenu && checked.toString()\">\n\t\t\t<span class=\"action-radio__icon\">\n\t\t\t\t<input\n\t\t\t\t\t:id\n\t\t\t\t\tv-model=\"model\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tclass=\"action-radio__input\"\n\t\t\t\t\t:class=\"{ focusable: !disabled }\"\n\t\t\t\t\t:value\n\t\t\t\t\t:name\n\t\t\t\t\t:disabled\n\t\t\t\t\t@change=\"$emit('change', $event)\">\n\t\t\t\t<NcIconSvgWrapper :path=\"checked ? mdiRadioboxMarked : mdiRadioboxBlank\" :size=\"20\" />\n\t\t\t</span>\n\t\t\t<span class=\"action-radio__text\">{{ text }}</span>\n\t\t</label>\n\t</li>\n</template>\n\n<script>\nimport { mdiRadioboxBlank, mdiRadioboxMarked } from '@mdi/js'\nimport { useModel } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionRadio',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the radio element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * checked state of the radio element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Define if this radio is part of a set.\n\t\t * Checking the radio will disable all the\n\t\t * others with the same name.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * value of the radio input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the radio element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'change',\n\t\t'update:modelValue',\n\t],\n\n\tsetup(props) {\n\t\treturn {\n\t\t\tmodel: useModel(props, 'modelValue'),\n\t\t\tmdiRadioboxBlank,\n\t\t\tmdiRadioboxMarked,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tchecked() {\n\t\t\treturn this.model === this.value\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n@include action-item('radio');\n\n.action:has(:focus-visible) {\n\toutline: 2px solid currentColor;\n}\n\n.action-radio {\n\t&__icon {\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&__input {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tmargin: auto;\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode","_toDisplayString"],"mappings":";;;;;;;AA0EA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,iBAAiB;AAAA,EAE1B,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,gBAAe;AAAA,MAC9B,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,YAAY;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;;;IAQV,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMX,OAAO;AAAA,MACN,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA;;;;IAMV,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA,IACN;AAAA,IACA;AAAA;EAGD,MAAM,OAAO;AACZ,WAAO;AAAA,MACN,OAAO,SAAS,OAAO,YAAY;AAAA,MACnC;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,UAAU;AACT,aAAO,KAAK,UAAU,KAAK;AAAA,IAC5B;AAAA;AAEF;;;AAzGS,MAAA,aAAA,EAAA,OAAM,qBAAoB;;AAa1B,MAAA,aAAA,EAAA,OAAM,qBAAoB;;;sBAflCA,mBAiBK,MAAA;AAAA,IAjBD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,SAAQ,CAAA,CAAA;AAAA,IAAK,MAAM,SAAA,oBAAgB;AAAA;IACnFC,mBAeQ,SAAA;AAAA,MAfD,OAAM;AAAA,MAAgB,MAAM,SAAA,oBAAgB;AAAA,MAAsB,gBAAc,SAAA,oBAAoB,SAAA,QAAQ,SAAQ;AAAA;MAC1HA,mBAYO,QAZP,YAYO;AAAA,uBAXNA,mBASmC,SAAA;AAAA,UARjC,IAAA,OAAA;AAAA,uEACQ,OAAA,QAAK;AAAA,UACd,MAAK;AAAA,UACL,OAAKD,eAAA,CAAC,uBAAqB,EAAA,WAAA,CACL,OAAA,SAAQ,CAAA,CAAA;AAAA,UAC7B,OAAA,OAAA;AAAA,UACA,MAAA,OAAA;AAAA,UACA,UAAA,OAAA;AAAA,UACA,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAA,MAAK,UAAW,MAAM;AAAA;wBAPtB,OAAA,KAAK;AAAA;QAQfE,YAAsF,6BAAA;AAAA,UAAnE,MAAM,SAAA,UAAU,OAAA,oBAAoB,OAAA;AAAA,UAAmB,MAAM;AAAA;;MAEjFD,mBAAkD,QAAlD,YAAkDE,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;"}

package/dist/chunks/NcActionRouter-vYFtIOzD.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionRouter-vYFtIOzD.mjs","sources":["../../src/components/NcActionRouter/NcActionRouter.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<RouterLink\n\t\t\t:aria-label\n\t\t\tclass=\"action-router focusable\"\n\t\t\trel=\"nofollow noreferrer noopener\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\n\t\t\t:title\n\t\t\t:to\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-router__icon\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-router__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span\n\t\t\t\tv-if=\"name\"\n\t\t\t\tclass=\"action-router__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-router__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-router__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span\n\t\t\t\tv-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-router__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-router__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</RouterLink>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionRouter',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * router-link to prop [https://router.vuejs.org/api/#to](https://router.vuejs.org/api/#to)\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action-item('router');\n@include action--disabled;\n</style>\n"],"names":["_createElementBlock","_createVNode","_renderSlot","_createElementVNode","_normalizeClass","_normalizeStyle","_openBlock","_toDisplayString"],"mappings":";;;;AA0DA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,UAAU;AAAA;;AAGb;;;;EApDI,OAAM;;AACE,MAAA,aAAA,EAAA,OAAM,sBAAqB;;;;;EAkBvB,OAAM;;;;sBAxCrBA,mBA6CK,MAAA;AAAA,IA7CD,OAAM;AAAA,IAAU,MAAM,SAAA,oBAAgB;AAAA;IACzCC,YA2Ca,uBAAA;AAAA,MA1CX,cAAA,KAAA;AAAA,MACD,OAAM;AAAA,MACN,KAAI;AAAA,MACH,MAAM,SAAA,oBAAgB;AAAA,MACtB,OAAA,KAAA;AAAA,MACA,IAAA,OAAA;AAAA,MACA,SAAO,KAAA;AAAA;uBAER,MAMO;AAAA,QANPC,WAMO,yBANP,MAMO;AAAA,UALNC,mBAImE,QAAA;AAAA,YAHlE,eAAY;AAAA,YACZ,OAAKC,eAAA,CAAC,uBAAqB,CAClB,KAAA,yCAAyC,KAAA,IAAI,CAAA,CAAA;AAAA,YACrD,OAAKC,eAAA,EAAA,iBAAqB,KAAA,YAAS,OAAU,KAAA,IAAI,MAAA,KAAA,CAAA;AAAA;;QAK7C,KAAA,QADPC,aAAAN,mBAUO,QAVP,YAUO;AAAA,UAPNG,mBAES,UAFT,YAESI,gBADL,KAAA,IAAI,GAAA,CAAA;AAAA,oCAERJ,mBAAI,MAAA,MAAA,MAAA,EAAA;AAAA,UAGJA,mBAAsD,QAAA;AAAA,YAAhD,OAAM;AAAA,YAA0B,aAAAI,gBAAa,KAAL,IAAI;AAAA;cAOvC,KAAA,2BADZP,mBAGiB,QAAA;AAAA;UADhB,OAAM;AAAA,UACN,aAAAO,gBAAa,KAAL,IAAI;AAAA,iDAGbP,mBAA0D,QAA1D,YAA0DO,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;;;;"}

package/dist/chunks/NcActionSeparator-B9pNQaji.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionSeparator-B9pNQaji.mjs","sources":["../../src/components/NcActionSeparator/NcActionSeparator.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action action-separator action--disabled\" role=\"separator\" />\n</template>\n\n<script>\nexport default {\n\tname: 'NcActionSeparator',\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.action-separator {\n\theight: 0;\n\tmargin: 5px 10px 5px 15px;\n\tborder-bottom: 1px solid var(--color-border-dark);\n\tcursor: default;\n}\n</style>\n"],"names":["_openBlock","_createElementBlock"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;;EANK,OAAM;AAAA,EAA2C,MAAK;;;AAA1D,SAAAA,UAAA,GAAAC,mBAAwE,MAAxE,UAAwE;;;"}

package/dist/chunks/NcActionText-CQ9qwJ0p.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionText-CQ9qwJ0p.mjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span\n\t\t\tclass=\"action-text\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\tv-if=\"icon !== ''\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"action-text__icon\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span\n\t\t\t\tv-if=\"name\"\n\t\t\t\tclass=\"action-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span\n\t\t\t\tv-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-text__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: NC_ACTIONS_IS_SEMANTIC_MENU,\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_openBlock","_toDisplayString"],"mappings":";;;;AAqDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;AAGZ;;;;EAzCI,OAAM;;AACE,MAAA,aAAA,EAAA,OAAM,oBAAmB;;;;;EAiBrB,OAAM;;;sBAnCrBA,mBAwCK,MAAA;AAAA,IAxCD,OAAM;AAAA,IAAU,MAAM,SAAA,oBAAgB;AAAA;IACzCC,mBAsCO,QAAA;AAAA,MArCN,OAAM;AAAA,MACL,gDAAO,KAAA,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAERC,WAOO,yBAPP,MAOO;AAAA,QALC,KAAA,SAAI,mBADXF,mBAKmE,QAAA;AAAA;UAHlE,eAAY;AAAA,UACZ,OAAKG,eAAA,CAAC,qBAAmB,CAChB,KAAA,uCAAuC,KAAA,IAAI,CAAA,CAAA;AAAA,UACnD,OAAKC,eAAA,EAAA,iBAAqB,KAAA,YAAS,OAAU,KAAA,IAAI,MAAA,KAAA,CAAA;AAAA;;MAK7C,KAAA,QADPC,aAAAL,mBASO,QATP,YASO;AAAA,QANNC,mBAES,UAFT,YAESK,gBADL,KAAA,IAAI,GAAA,CAAA;AAAA,QAIRL,mBAAoD,QAAA;AAAA,UAA9C,OAAM;AAAA,UAAwB,aAAAK,gBAAa,KAAL,IAAI;AAAA;YAOrC,KAAA,2BADZN,mBAGiB,QAAA;AAAA;QADhB,OAAM;AAAA,QACN,aAAAM,gBAAa,KAAL,IAAI;AAAA,+CAGbN,mBAAwD,QAAxD,YAAwDM,gBAAd,KAAA,IAAI,GAAA,CAAA;AAAA;;;;;"}

package/dist/chunks/NcActionTextEditable-B8y_GEre.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcActionTextEditable-B8y_GEre.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconPencilOutline,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span\n\t\t\tclass=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form\n\t\t\t\tref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label\n\t\t\t\t\tv-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea\n\t\t\t\t\t:id=\"computedId\"\n\t\t\t\t\tclass=\"action-text-editable__textarea\"\n\t\t\t\t\t:class=\"[{ focusable: isFocusable }]\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowRight\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { mdiArrowRight } from '@mdi/js'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the text area\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 * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tmdiArrowRight,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn createElementId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/inputs.scss';\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: var(--font-weight-default, normal);\n\tline-height: var(--default-clickable-area);\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tinset-inline-start: 0;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tz-index: -1;\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tinset-inline-end: calc($icon-margin + 1px);\n\t\tbottom: 1px;\n\t\twidth: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\theight: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */\n\t\tmax-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: calc(var(--default-clickable-area) * 4);\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-inline-start-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: calc($icon-margin - $input-margin);\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_mergeProps","_createVNode"],"mappings":";;;;;;AA+FA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,YAAY,gBAAe;AAAA,MAC1C,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,QAAQ;AACP,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACD;AAAA,EAEA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,cAAc;AACb,aAAO,CAAC,KAAK;AAAA,IACd;AAAA,IAEA,aAAa;AACZ,aAAO,gBAAe;AAAA,IACvB;AAAA;EAGD,SAAS;AAAA,IACR,QAAQ,OAAO;AAMd,WAAK,MAAM,SAAS,KAAK;AAMzB,WAAK,MAAM,qBAAqB,MAAM,OAAO,KAAK;AAAA,IACnD;AAAA,IAEA,SAAS,OAAO;AACf,YAAM,eAAc;AACpB,YAAM,gBAAe;AACrB,UAAI,CAAC,KAAK,UAAU;AAMnB,aAAK,MAAM,UAAU,KAAK;AAAA,MAC3B,OAAO;AAEN,eAAO;AAAA,MACR;AAAA,IACD;AAAA;AAEF;;;;;;;;sBApJCA,mBA4CK,MAAA;AAAA,IA5CD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,UAAQ,CAAA;AAAA;IACxDC,mBA0CO,QAAA;AAAA,MAzCN,OAAM;AAAA,MACL,gDAAO,KAAA,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAERC,WAKO,yBALP,MAKO;AAAA,QAJND,mBAGsC,QAAA;AAAA,UAFpC,OAAKD,eAAA,CAAA,CAAG,KAAA,YAAS,oCAAuC,KAAA,IAAI,GAEvD,4BAA4B,CAAA;AAAA,UADjC,OAAKG,eAAA,EAAA,iBAAqB,KAAA,YAAS,OAAU,KAAA,IAAI,MAAA,KAAA,CAAA;AAAA;;MAKpDF,mBA6BO,QAAA;AAAA,QA5BN,KAAI;AAAA,QACJ,OAAM;AAAA,QACL,UAAU,OAAA;AAAA,QACV,+DAAgB,SAAA,YAAA,SAAA,SAAA,GAAA,IAAA,GAAQ,CAAA,SAAA,CAAA;AAAA;QACzBA,mBAAmE,SAAA;AAAA,UAA3D,IAAI,OAAA;AAAA,UAAI,MAAK;AAAA,UAAS,OAAM;AAAA;QAI7B,KAAA,qBADPF,mBAKQ,SAAA;AAAA;UAHP,OAAM;AAAA,UACL,KAAK,SAAA;AAAA,2BACH,KAAA,IAAI,GAAA,GAAA,UAAA;QAGRE,mBAOoB,YAPpBG,WAOoB;AAAA,UANlB,IAAI,SAAA;AAAA,UACL,OAAK,CAAC,kCAAgC,CAAA,EAAA,WAChB,SAAA,YAAW,CAAA,CAAA;AAAA,UAChC,UAAU,OAAA;AAAA,UACV,OAAO,OAAA;AAAA,WACA,KAAA,QAAM;AAAA,UACb,gDAAO,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA;AAAA;uBAITH,mBAEQ,SAAA;AAAA,UAFmB,KAAK,OAAA;AAAA,UAAI,OAAM;AAAA;UACzCI,YAAsD,6BAAA;AAAA,YAApC,aAAA;AAAA,YAAa,MAAM,OAAA;AAAA;;mBADtB,OAAA,QAAQ;AAAA;;;;;;"}