@nextcloud/vue 9.0.0-alpha.1 → 9.0.0-alpha.2

package/dist/chunks/NcInputField-6vveMrmf.cjs

@@ -1,283 +0,0 @@
-var V = require("../assets/NcInputField-qx4Me7uJ.css");
-const c = require("./NcButton-7UKtzkX5.cjs"), d = require("./GenRandomId-ULxaMkkr.cjs"), u = require("./AlertCircleOutline-M7wVqz_-.cjs"), h = require("./Check-fwcsc82n.cjs"), e = require("vue"), p = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), _ = {
-  name: "NcInputField",
-  components: {
-    NcButton: c.NcButton,
-    AlertCircle: u.AlertCircle,
-    Check: h.Check
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * The value of the input field
-     * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
-     */
-    modelValue: {
-      type: [String, Number],
-      required: !0
-    },
-    /**
-     * The type of the input element
-     */
-    type: {
-      type: String,
-      default: "text",
-      validator: (l) => [
-        "text",
-        "password",
-        "email",
-        "tel",
-        "url",
-        "search",
-        "number"
-      ].includes(l)
-    },
-    /**
-     * The input label, always provide one for accessibility purposes.
-     * This will also be used as a placeholder unless the placeholder
-     * prop is populated with a different string.
-     *
-     * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).
-     */
-    label: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Pass in true if you want to use an external label. This is useful
-     * if you need a label that looks different from the one provided by
-     * this component
-     */
-    labelOutside: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The placeholder of the input. This defaults as the string that's
-     * passed into the label prop. In order to remove the placeholder,
-     * pass in an empty string.
-     */
-    placeholder: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Controls whether to display the trailing button.
-     */
-    showTrailingButton: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Label of the trailing button
-     *
-     * Required when showTrailingButton is set
-     */
-    trailingButtonLabel: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Toggles the success state of the component. Adds a checkmark icon.
-     * this cannot be used together with canClear.
-     */
-    success: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Toggles the error state of the component. Adds an error icon.
-     * this cannot be used together with canClear.
-     */
-    error: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Additional helper text message
-     *
-     * This will be displayed beneath the input field. In case the field is
-     * also marked as having an error, the text will be displayed in red.
-     */
-    helperText: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Disable the input field
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Specifies whether the input should have a pill form.
-     * By default, input has rounded corners.
-     */
-    pill: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Class to add to the root component.
-     */
-    class: {
-      type: [Object, String, Array],
-      default: ""
-    },
-    /**
-     * Class to add to the input field.
-     * Necessary to use NcInputField in the NcActionInput component.
-     */
-    inputClass: {
-      type: [Object, String],
-      default: ""
-    }
-  },
-  emits: [
-    "update:modelValue",
-    "trailing-button-click"
-  ],
-  computed: {
-    computedId() {
-      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
-    },
-    inputName() {
-      return "input" + d.GenRandomId();
-    },
-    hasTrailingIcon() {
-      return this.success;
-    },
-    hasPlaceholder() {
-      return this.placeholder !== "" && this.placeholder !== void 0;
-    },
-    computedPlaceholder() {
-      return this.hasPlaceholder ? this.placeholder : this.label;
-    },
-    isValidLabel() {
-      const l = this.label || this.labelOutside;
-      return l || console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation."), l;
-    },
-    ariaDescribedby() {
-      const l = [];
-      return this.helperText.length > 0 && l.push("".concat(this.inputName, "-helper-text")), this.$attrs["aria-describedby"] && l.push(this.$attrs["aria-describedby"]), l.join(" ") || null;
-    }
-  },
-  methods: {
-    /**
-     * Focus the input element
-     *
-     * @public
-     */
-    focus() {
-      this.$refs.input.focus();
-    },
-    /**
-     * Select all the text in the input
-     *
-     * @public
-     */
-    select() {
-      this.$refs.input.select();
-    },
-    handleInput(l) {
-      this.$emit("update:modelValue", this.type === "number" && typeof this.modelValue == "number" ? parseFloat(l.target.value, 10) : l.target.value);
-    },
-    handleTrailingButtonClick(l) {
-      this.$emit("trailing-button-click", l);
-    }
-  }
-}, m = { class: "input-field__main-wrapper" }, f = ["id", "type", "disabled", "placeholder", "aria-describedby", "value"], b = ["for"], g = { class: "input-field__icon input-field__icon--leading" }, y = {
-  key: 2,
-  class: "input-field__icon input-field__icon--trailing"
-}, k = ["id"];
-function B(l, n, t, N, v, i) {
-  const s = e.resolveComponent("NcButton"), a = e.resolveComponent("Check"), r = e.resolveComponent("AlertCircle");
-  return e.openBlock(), e.createElementBlock("div", {
-    class: e.normalizeClass(["input-field", [{ "input-field--disabled": t.disabled }, l.$props.class]])
-  }, [
-    e.createElementVNode("div", m, [
-      e.createElementVNode("input", e.mergeProps(l.$attrs, {
-        id: i.computedId,
-        ref: "input",
-        class: ["input-field__input", [
-          t.inputClass,
-          {
-            "input-field__input--trailing-icon": t.showTrailingButton || i.hasTrailingIcon,
-            "input-field__input--leading-icon": !!l.$slots.icon,
-            "input-field__input--label-outside": t.labelOutside,
-            "input-field__input--success": t.success,
-            "input-field__input--error": t.error,
-            "input-field__input--pill": t.pill
-          }
-        ]],
-        type: t.type,
-        disabled: t.disabled,
-        placeholder: i.computedPlaceholder,
-        "aria-describedby": i.ariaDescribedby,
-        "aria-live": "polite",
-        value: t.modelValue.toString(),
-        onInput: n[0] || (n[0] = (...o) => i.handleInput && i.handleInput(...o))
-      }), null, 16, f),
-      !t.labelOutside && i.isValidLabel ? (e.openBlock(), e.createElementBlock("label", {
-        key: 0,
-        class: e.normalizeClass(["input-field__label", [{
-          "input-field__label--trailing-icon": t.showTrailingButton || i.hasTrailingIcon,
-          "input-field__label--leading-icon": !!l.$slots.icon
-        }]]),
-        for: i.computedId
-      }, e.toDisplayString(t.label), 11, b)) : e.createCommentVNode("", !0),
-      e.withDirectives(e.createElementVNode("div", g, [
-        e.renderSlot(l.$slots, "icon", {}, void 0, !0)
-      ], 512), [
-        [e.vShow, !!l.$slots.icon]
-      ]),
-      t.showTrailingButton ? (e.openBlock(), e.createBlock(s, {
-        key: 1,
-        type: "tertiary-no-background",
-        class: e.normalizeClass(["input-field__trailing-button", [{
-          "input-field__trailing-button--pill": t.pill
-        }]]),
-        "aria-label": t.trailingButtonLabel,
-        disabled: t.disabled,
-        onClick: i.handleTrailingButtonClick
-      }, {
-        icon: e.withCtx(() => [
-          e.renderSlot(l.$slots, "trailing-button-icon", {}, void 0, !0)
-        ]),
-        _: 3
-      }, 8, ["class", "aria-label", "disabled", "onClick"])) : t.success || t.error ? (e.openBlock(), e.createElementBlock("div", y, [
-        t.success ? (e.openBlock(), e.createBlock(a, {
-          key: 0,
-          size: 20,
-          style: { color: "var(--color-success-text)" }
-        })) : t.error ? (e.openBlock(), e.createBlock(r, {
-          key: 1,
-          size: 20,
-          style: { color: "var(--color-error-text)" }
-        })) : e.createCommentVNode("", !0)
-      ])) : e.createCommentVNode("", !0)
-    ]),
-    t.helperText.length > 0 ? (e.openBlock(), e.createElementBlock("p", {
-      key: 0,
-      id: "".concat(i.inputName, "-helper-text"),
-      class: e.normalizeClass(["input-field__helper-text-message", {
-        "input-field__helper-text-message--error": t.error,
-        "input-field__helper-text-message--success": t.success
-      }])
-    }, [
-      t.success ? (e.openBlock(), e.createBlock(a, {
-        key: 0,
-        class: "input-field__helper-text-message__icon",
-        size: 18
-      })) : t.error ? (e.openBlock(), e.createBlock(r, {
-        key: 1,
-        class: "input-field__helper-text-message__icon",
-        size: 18
-      })) : e.createCommentVNode("", !0),
-      e.createTextVNode(" " + e.toDisplayString(t.helperText), 1)
-    ], 10, k)) : e.createCommentVNode("", !0)
-  ], 2);
-}
-const C = /* @__PURE__ */ p._export_sfc(_, [["render", B], ["__scopeId", "data-v-53a71842"]]);
-exports.NcInputField = C;

package/dist/chunks/NcInputField-6vveMrmf.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcInputField-6vveMrmf.cjs","sources":["../../src/components/NcInputField/NcInputField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n### Description\n\nThis component is used by the other Fields components.\nIt extends and styles an HTMLInputElement.\n\nYou cannot use it as is. This is here for documentation purposes.\nSee the other field components.\n\nFor a list of all available props and attributes, please check the [HTMLInputElement documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n\n</docs>\n\n<template>\n\t<div class=\"input-field\" :class=\"[{ 'input-field--disabled': disabled }, $props.class ]\">\n\t\t<div class=\"input-field__main-wrapper\">\n\t\t\t<input v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"input-field__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t\t'input-field__input--leading-icon': !!$slots.icon,\n\t\t\t\t\t\t'input-field__input--label-outside': labelOutside,\n\t\t\t\t\t\t'input-field__input--success': success,\n\t\t\t\t\t\t'input-field__input--error': error,\n\t\t\t\t\t\t'input-field__input--pill': pill,\n\t\t\t\t\t}]\"\n\t\t\t\t:value=\"modelValue.toString()\"\n\t\t\t\t@input=\"handleInput\">\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"input-field__label\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__label--trailing-icon': showTrailingButton || hasTrailingIcon,\n\t\t\t\t\t'input-field__label--leading-icon': !!$slots.icon,\n\t\t\t\t}]\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\n\t\t\t<!-- Leading icon -->\n\t\t\t<div v-show=\"!!$slots.icon\" class=\"input-field__icon input-field__icon--leading\">\n\t\t\t\t<!-- Leading material design icon in the text field, set the size to 18 -->\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</div>\n\n\t\t\t<!-- trailing button -->\n\t\t\t<NcButton v-if=\"showTrailingButton\"\n\t\t\t\ttype=\"tertiary-no-background\"\n\t\t\t\tclass=\"input-field__trailing-button\"\n\t\t\t\t:class=\"[{\n\t\t\t\t\t'input-field__trailing-button--pill': pill,\n\t\t\t\t}]\"\n\t\t\t\t:aria-label=\"trailingButtonLabel\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@click=\"handleTrailingButtonClick\">\n\t\t\t\t<!-- Populating this slot creates a trailing button within the\n\t\t\t\tinput boundaries that emits a `trailing-button-click` event -->\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"trailing-button-icon\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<!-- Success and error icons -->\n\t\t\t<div v-else-if=\"success || error\"\n\t\t\t\tclass=\"input-field__icon input-field__icon--trailing\">\n\t\t\t\t<Check v-if=\"success\" :size=\"20\" style=\"color: var(--color-success-text);\" />\n\t\t\t\t<AlertCircle v-else-if=\"error\" :size=\"20\" style=\"color: var(--color-error-text);\" />\n\t\t\t</div>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"input-field__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'input-field__helper-text-message--error': error,\n\t\t\t\t'input-field__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"input-field__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcInputField',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The value of the input field\n\t\t * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [String, Number],\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The type of the input element\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'text',\n\t\t\t\t'password',\n\t\t\t\t'email',\n\t\t\t\t'tel',\n\t\t\t\t'url',\n\t\t\t\t'search',\n\t\t\t\t'number',\n\t\t\t].includes(value),\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t *\n\t\t * Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t *\n\t\t * Required when showTrailingButton is set\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specifies whether the input should have a pill form.\n\t\t * By default, input has rounded corners.\n\t\t */\n\t\tpill: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the root component.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [Object, String, Array],\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:modelValue',\n\t\t'trailing-button-click',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasTrailingIcon() {\n\t\t\treturn this.success\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:modelValue', this.type === 'number' && typeof this.modelValue === 'number' ? parseFloat(event.target.value, 10) : event.target.value)\n\t\t},\n\n\t\thandleTrailingButtonClick(event) {\n\t\t\tthis.$emit('trailing-button-click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.input-field {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\n\t&__main-wrapper {\n\t\theight: var(--default-clickable-area);\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.4;\n\t\tfilter: saturate(0.4);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input\n\t\theight: var(--default-clickable-area) !important;\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\t\t-webkit-appearance: textfield !important;\n\t\t-moz-appearance: textfield !important;\n\n\t\t// Center text if external label is used\n\t\t&--label-outside {\n\t\t\tpadding-block: 0;\n\t\t}\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: 2px solid var(--color-main-text) !important;\n\t\t\tbox-shadow: 0 0 0 2px var(--color-main-background) !important;\n\t\t}\n\n\t\t&:focus + .input-field__label,\n\t\t&:hover:not(:placeholder-shown) + .input-field__label {\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--leading-icon {\n\t\t\tpadding-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--pill {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 14px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: var(--default-clickable-area);\n\t\t}\n\n\t\t&--trailing-icon {\n\t\t\tmargin-inline-end: var(--default-clickable-area);\n\t\t}\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 5px;\n\t\tmargin-inline-start: 9px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t\t&--leading-icon {\n\t\t\tmargin-inline-start: 41px;\n\t\t}\n\t}\n\n\t&__icon {\n\t\tposition: absolute;\n\t\theight: var(--default-clickable-area);\n\t\twidth: var(--default-clickable-area);\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\topacity: 0.7;\n\n\t\t&--leading {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-start: 2px;\n\t\t}\n\n\t\t&--trailing {\n\t\t\tinset-block-end: 0;\n\t\t\tinset-inline-end: 2px;\n\t\t}\n\t}\n\n\t&__trailing-button {\n\t\t&.button-vue {\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t}\n\n\t\t&--pill.button-vue {\n\t\t\tborder-radius: var(--border-radius-pill);\n\t\t}\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcButton","value","isValidLabel","ariaDescribedby","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_6","vue","$options","$props","_ctx","_cache","args","_hoisted_5"],"mappings":";6PAuHAA,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC,EAAA;AAAA;;;EAKD,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;MAME,MAAA,CAAA,QAAA,MAAA;AAAA;;;;;;;MASA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACC;AAAA;QAEA;AAAA;;QAGA;AAAA,QACA;AAAA,MACD,EAAA,SAAAA,CAAA;AAAA;;;;;;;;IAUD,OAAA;AAAA;MAEC,SAAA;AAAA;;;;;;;;;;;;;;;;;MAoBA,SAAA;AAAA;;;;IAMD,oBAAA;AAAA;;;;;;;;IAUA,qBAAA;AAAA;;;;;;;IASA,SAAA;AAAA;;;;;;;IASA,OAAA;AAAA;;;;;;;;;;;;;;;;IAmBA,UAAA;AAAA;;;;;;;;;;;;;;IAiBA,OAAA;AAAA;;;;;;;;MASC,MAAA,CAAA,QAAA,MAAA;AAAA;;;EAKF,OAAA;AAAA,IACC;AAAA;;EAID,UAAA;AAAA;AAEE,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA;;;;IAOD,kBAAA;AACC,aAAA,KAAA;AAAA;IAGD,iBAAA;;;IAIA,sBAAA;;;IAIA,eAAA;;AAEC,aAAAC,KACC,QAAA,KAAA,mJAAA,GAEDA;AAAA;IAGD,kBAAA;;8FAKC,KAAA,OAAA,kBAAA,8CAGAC,EAAA,KAAA,GAAA,KAAA;AAAA;;EAIF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMC,QAAA;;;;;;;;IASA,SAAA;;;IAIA,YAAAC,GAAA;AACC,WAAA,MAAA,qBAAA,KAAA,SAAA,YAAA,OAAA,KAAA,cAAA,WAAA,WAAAA,EAAA,OAAA,OAAA,EAAA,IAAAA,EAAA,OAAA,KAAA;AAAA;IAGD,0BAAAA,GAAA;AACC,WAAA,MAAA,yBAAAA,CAAA;AAAA;;AAGH,GAnTOC,IAAA,EAAA,OAAA,4BAAA,GApCPC,IAAA,CAAA,MAAA,QAAA,YAAA,eAAA,oBAAA,OAAA,GAAAC,IAAA,CAAA,KAAA,GAqE+BC,IAAA,EAAA,OAAA,+CAAA;;EAwB3B,OAAA;GA7FJC,IAAA,CAAA,IAAA;;;;;;IAoCEC,EAAA,mBAAA,OAAAL,GAAA;AAAA;QAEG,IAAAM,EAAA;AAAA,QACD,KAAA;AAAA;;;YAOuE,qCAAAC,EAAA,sBAAAD,EAAA;AAAA,YAAmF,oCAAA,CAAA,CAAAE,EAAA,OAAA;AAAA;;;;;;QALzJ,MAAAD,EAAA;AAAA,QACA,UAAAA,EAAA;AAAA,QACA,aAAAD,EAAA;AAAA,QACA,oBAAAA,EAAA;AAAA,QACD,aAAA;AAAA;QAWC,SAAAG,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAJ,EAAA,eAAAA,EAAA,YAAA,GAAAI,CAAA;AAAA,MAxDL,CAAA,GAAA,MAAA,IAAAT,CAAA;AAAA,MA0DiB,CAAAM,EAAA,gBAAAD,EAAA;;;UAEwC,qCAAAC,EAAA,sBAAAD,EAAA;AAAA,UAAkF,oCAAA,CAAA,CAAAE,EAAA,OAAA;AAAA;QAItI,KAAAF,EAAA;AAAA,MACE,GAAAD,EAAA,gBAAAE,EAAA,KAAA,GAAA,IAAAL,CAAA,KAjEPG,EAAA,mBAAA,IAAA,EAAA;AAAA,MAqEGA,EAAA,eAAAA,EAAA,mBAAA,OAAAF,GAAA;AAAA;;QAAe,CAAAE,EAAA,OAAA,CAAA,CAAAG,EAAA,OAAA,IAAA;AAAA;;;QAOd,MAAA;AAAA;;;QAKC,cAAAD,EAAA;AAAA,QACA,UAAAA,EAAA;AAAA,QACA,SAAAD,EAAA;AAAA;QAGU,MAAAD,EAAA,QAAA,MAAA;AAAA;;;+DAMIE,EAAA,WAAAA,EAAA,SAAhBF,EAAA,UAAA,GAAAA,EAAA,mBAAA,OAAAM,GAAA;AAAA;;UAEwB,MAAA;AAAA,UAAU,OAAA,EAAA,OAAA,4BAAA;AAAA;;UACD,MAAA;AAAA,UAAU,OAAA,EAAA,OAAA,0BAAA;AAAA,cA/F9CN,EAAA,mBAAA,IAAA,EAAA;AAAA,YAAAA,EAAA,mBAAA,IAAA,EAAA;AAAA;IAkGWE,EAAA,WAAA,SAAA;;MACP,IAAA,GAAA,OAAAD,EAAA,WAAA;AAAA;;;;;;;QAMqB,OAAA;AAAA,QAAgD,MAAA;AAAA;;QACvC,OAAA;AAAA,QAAgD,MAAA;AAAA,YA1GlFD,EAAA,mBAAA,IAAA,EAAA;AAAA;IAAA,GAAA,IAAAD,CAAA,KAAAC,EAAA,mBAAA,IAAA,EAAA;AAAA;;;;"}

package/dist/chunks/NcListItem-3QDILDKr.cjs

@@ -1,339 +0,0 @@
-var g = require("../assets/NcListItem-RylkggkP.css");
-const m = require("./NcActions-YpbmJ7hS.cjs"), f = require("./NcCounterBubble-0pCAxQl7.cjs"), y = require("../Components/NcVNodes.cjs"), r = require("./_l10n-Fl7RzbcZ.cjs"), e = require("vue"), p = require("./_plugin-vue_export-helper-xG2iG1wl.cjs");
-r.register(r.t5);
-const _ = {
-  name: "NcListItem",
-  components: {
-    NcActions: m.NcActions,
-    NcCounterBubble: f.NcCounterBubble,
-    NcVNodes: y
-  },
-  inheritAttrs: !1,
-  props: {
-    /**
-     * The details text displayed in the upper right part of the component
-     */
-    details: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Name (first line of text)
-     */
-    name: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The route for the router link.
-     */
-    to: {
-      type: [String, Object],
-      default: null
-    },
-    /**
-     * The value for the external link
-     */
-    href: {
-      type: String,
-      default: "#"
-    },
-    target: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Id for the `<a>` element
-     */
-    anchorId: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Make subname bold
-     */
-    bold: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Show the NcListItem in compact design
-     */
-    compact: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Toggle the active state of the component
-     */
-    active: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Aria label for the wrapper element
-     */
-    linkAriaLabel: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Aria label for the actions toggle
-     */
-    actionsAriaLabel: {
-      type: String,
-      default: ""
-    },
-    /**
-     * If different from 0 this component will display the
-     * NcCounterBubble component
-     */
-    counterNumber: {
-      type: [Number, String],
-      default: 0
-    },
-    /**
-     * Outlined or highlighted state of the counter
-     */
-    counterType: {
-      type: String,
-      default: "",
-      validator(t) {
-        return ["highlighted", "outlined", ""].indexOf(t) !== -1;
-      }
-    },
-    /**
-     * To be used only when the elements in the actions menu are very important
-     */
-    forceDisplayActions: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "click",
-    "update:menuOpen"
-  ],
-  data() {
-    return {
-      hovered: !1,
-      focused: !1,
-      hasActions: !1,
-      hasSubname: !1,
-      displayActionsOnHoverFocus: !1,
-      menuOpen: !1,
-      hasIndicator: !1,
-      hasDetails: !1
-    };
-  },
-  computed: {
-    oneLine() {
-      return !this.hasSubname && !this.showDetails;
-    },
-    showAdditionalElements() {
-      return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
-    },
-    showDetails() {
-      return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
-    },
-    computedActionsAriaLabel() {
-      return this.actionsAriaLabel || r.t('Actions for item with name "{name}"', { name: this.name });
-    }
-  },
-  watch: {
-    menuOpen(t) {
-      !t && !this.hovered && (this.displayActionsOnHoverFocus = !1);
-    }
-  },
-  mounted() {
-    this.checkSlots();
-  },
-  updated() {
-    this.checkSlots();
-  },
-  methods: {
-    /**
-     * Handle link click
-     *
-     * @param {PointerEvent} event - Native click event
-     * @param {Function} [navigate] - VueRouter link's navigate if any
-     * @param {string} [routerLinkHref] - VueRouter link's href
-     */
-    onClick(t, n, s) {
-      this.$emit("click", t), !(t.metaKey || t.altKey || t.ctrlKey || t.shiftKey) && s && (n == null || n(t), t.preventDefault());
-    },
-    handleMouseover() {
-      this.showActions(), this.hovered = !0;
-    },
-    showActions() {
-      this.hasActions && (this.displayActionsOnHoverFocus = !0), this.hovered = !1;
-    },
-    hideActions() {
-      this.displayActionsOnHoverFocus = !1;
-    },
-    /**
-     * Show actions upon focus
-     */
-    handleFocus() {
-      this.focused = !0, this.showActions();
-    },
-    handleBlur() {
-      this.focused = !1;
-    },
-    /**
-     * Hide the actions on mouseleave unless the menu is open
-     */
-    handleMouseleave() {
-      this.menuOpen || (this.displayActionsOnHoverFocus = !1), this.hovered = !1;
-    },
-    /**
-     * This method checks if the root element of the component is focused and
-     * if that's the case it focuses the actions button if available
-     *
-     * @param {Event} e the keydown event
-     */
-    handleTab(t) {
-      this.focused && this.hasActions ? (t.preventDefault(), this.$refs.actions.$refs.menuButton.$el.focus(), this.focused = !1) : this.displayActionsOnHoverFocus = !1;
-    },
-    handleActionsUpdateOpen(t) {
-      this.menuOpen = t, this.$emit("update:menuOpen", t);
-    },
-    // Check if subname and actions slots are populated
-    checkSlots() {
-      this.hasActions !== !!this.$slots.actions && (this.hasActions = !!this.$slots.actions), this.hasSubname !== !!this.$slots.subname && (this.hasSubname = !!this.$slots.subname), this.hasIndicator !== !!this.$slots.indicator && (this.hasIndicator = !!this.$slots.indicator), this.hasDetails !== !!this.$slots.details && (this.hasDetails = !!this.$slots.details);
-    }
-  }
-}, b = ["id", "href", "target", "rel", "aria-label", "onClick"], A = { class: "list-item-content" }, N = { class: "line-one" }, k = { class: "line-one__name" }, v = {
-  key: 0,
-  class: "line-one__details"
-}, w = {
-  key: 0,
-  class: "line-two__subname"
-}, B = {
-  key: 1,
-  class: "line-two__additional_elements"
-}, C = {
-  key: 1,
-  class: "line-two__indicator"
-}, S = {
-  key: 0,
-  class: "list-item__extra"
-};
-function V(t, n, s, O, a, i) {
-  const u = e.resolveComponent("NcCounterBubble"), c = e.resolveComponent("NcActions");
-  return e.openBlock(), e.createBlock(e.resolveDynamicComponent(s.to ? "router-link" : "NcVNodes"), e.normalizeProps(e.guardReactiveProps({ ...s.to && { custom: !0, to: s.to } })), {
-    default: e.withCtx(({ href: d, navigate: h, isActive: l }) => [
-      e.createElementVNode("li", e.mergeProps({
-        class: ["list-item__wrapper", { "list-item__wrapper--active": l || s.active }]
-      }, t.$attrs), [
-        e.createElementVNode("a", {
-          id: s.anchorId,
-          ref: "list-item",
-          href: d || s.href,
-          target: s.target || (s.href === "#" ? void 0 : "_blank"),
-          rel: s.href === "#" ? void 0 : "noopener noreferrer",
-          class: "list-item",
-          "aria-label": s.linkAriaLabel,
-          onMouseover: n[2] || (n[2] = (...o) => i.handleMouseover && i.handleMouseover(...o)),
-          onMouseleave: n[3] || (n[3] = (...o) => i.handleMouseleave && i.handleMouseleave(...o)),
-          onFocus: n[4] || (n[4] = (...o) => i.handleFocus && i.handleFocus(...o)),
-          onBlur: n[5] || (n[5] = (...o) => i.handleBlur && i.handleBlur(...o)),
-          onKeydown: [
-            n[6] || (n[6] = e.withKeys(e.withModifiers((...o) => i.handleTab && i.handleTab(...o), ["exact"]), ["tab"])),
-            n[7] || (n[7] = e.withKeys((...o) => i.hideActions && i.hideActions(...o), ["esc"]))
-          ],
-          onClick: (o) => i.onClick(o, h, d)
-        }, [
-          e.createElementVNode("div", {
-            class: e.normalizeClass(["list-item-content__wrapper", { "list-item-content__wrapper--compact": s.compact }])
-          }, [
-            e.renderSlot(t.$slots, "icon", {}, void 0, !0),
-            e.createElementVNode("div", A, [
-              e.createElementVNode("div", {
-                class: e.normalizeClass(["list-item-content__main", { "list-item-content__main--oneline": i.oneLine }])
-              }, [
-                e.createElementVNode("div", N, [
-                  e.createElementVNode("span", k, e.toDisplayString(s.name), 1),
-                  i.showDetails ? (e.openBlock(), e.createElementBlock("span", v, [
-                    e.renderSlot(t.$slots, "details", {}, () => [
-                      e.createTextVNode(e.toDisplayString(s.details), 1)
-                    ], !0)
-                  ])) : e.createCommentVNode("", !0)
-                ]),
-                e.createElementVNode("div", {
-                  class: e.normalizeClass(["line-two", { "line-two--bold": s.bold }])
-                }, [
-                  a.hasSubname ? (e.openBlock(), e.createElementBlock("span", w, [
-                    e.renderSlot(t.$slots, "subname", {}, void 0, !0)
-                  ])) : e.createCommentVNode("", !0),
-                  s.counterNumber != 0 || a.hasIndicator ? e.withDirectives((e.openBlock(), e.createElementBlock("span", B, [
-                    s.counterNumber != 0 ? (e.openBlock(), e.createBlock(u, {
-                      key: 0,
-                      active: l || s.active,
-                      class: "line-two__counter",
-                      type: s.counterType
-                    }, {
-                      default: e.withCtx(() => [
-                        e.createTextVNode(e.toDisplayString(s.counterNumber), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["active", "type"])) : e.createCommentVNode("", !0),
-                    a.hasIndicator ? (e.openBlock(), e.createElementBlock("span", C, [
-                      e.renderSlot(t.$slots, "indicator", {}, void 0, !0)
-                    ])) : e.createCommentVNode("", !0)
-                  ], 512)), [
-                    [e.vShow, i.showAdditionalElements]
-                  ]) : e.createCommentVNode("", !0)
-                ], 2)
-              ], 2),
-              s.forceDisplayActions ? e.createCommentVNode("", !0) : e.withDirectives((e.openBlock(), e.createElementBlock("div", {
-                key: 0,
-                class: "list-item-content__actions",
-                onClick: n[0] || (n[0] = e.withModifiers(() => {
-                }, ["prevent", "stop"]))
-              }, [
-                e.createVNode(c, {
-                  ref: "actions",
-                  primary: l || s.active,
-                  "aria-label": i.computedActionsAriaLabel,
-                  "onUpdate:open": i.handleActionsUpdateOpen
-                }, {
-                  default: e.withCtx(() => [
-                    e.renderSlot(t.$slots, "actions", {}, void 0, !0)
-                  ]),
-                  _: 2
-                }, 1032, ["primary", "aria-label", "onUpdate:open"])
-              ], 512)), [
-                [e.vShow, a.displayActionsOnHoverFocus]
-              ])
-            ]),
-            s.forceDisplayActions ? (e.openBlock(), e.createElementBlock("div", {
-              key: 0,
-              class: "list-item-content__actions",
-              onClick: n[1] || (n[1] = e.withModifiers(() => {
-              }, ["prevent", "stop"]))
-            }, [
-              e.createVNode(c, {
-                ref: "actions",
-                primary: l || s.active,
-                "aria-label": i.computedActionsAriaLabel,
-                "onUpdate:open": i.handleActionsUpdateOpen
-              }, {
-                default: e.withCtx(() => [
-                  e.renderSlot(t.$slots, "actions", {}, void 0, !0)
-                ]),
-                _: 2
-              }, 1032, ["primary", "aria-label", "onUpdate:open"])
-            ])) : e.createCommentVNode("", !0)
-          ], 2),
-          t.$slots.extra ? (e.openBlock(), e.createElementBlock("div", S, [
-            e.renderSlot(t.$slots, "extra", {}, void 0, !0)
-          ])) : e.createCommentVNode("", !0)
-        ], 40, b)
-      ], 16)
-    ]),
-    _: 3
-  }, 16);
-}
-const D = /* @__PURE__ */ p._export_sfc(_, [["render", V], ["__scopeId", "data-v-1f33651e"]]);
-exports.NcListItem = D;