@nmorph/nmorph-ui-kit 3.0.4 → 3.0.6

package/dist/components/data/nmorph-table/NmorphTable.vue.js

@@ -1,31 +1,37 @@
 import './NmorphTable.css';
-import p from "./NmorphTable.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeStyle as a, normalizeClass as _, createElementVNode as o, Fragment as d, renderList as i, toDisplayString as s, createBlock as m, createCommentVNode as y, renderSlot as h } from "vue";
+import h from "./NmorphTable.vue2.js";
+import { openBlock as r, createElementBlock as t, normalizeStyle as n, normalizeClass as _, createElementVNode as o, renderSlot as p, Fragment as d, renderList as i, toDisplayString as s, createBlock as m, createCommentVNode as y } from "vue";
 /* empty css                 */
 import v from "../../../_virtual/_plugin-vue_export-helper.js";
-const u = { class: "nmorph-table__wrapper" }, w = { class: "nmorph-table__header" }, f = ["data-src"], g = { class: "nmorph-table__table-row" }, k = { class: "nmorph-table__cell" }, x = ["tabindex"], S = ["id"], R = { class: "nmorph-table__slot-columns" }, W = ["id"], B = { class: "nmorph-table__slot-columns" };
-function E(c, H, N, l, C, I) {
+const w = { class: "nmorph-table__wrapper" }, f = {
+  class: "nmorph-table__slot-columns",
+  hidden: ""
+}, k = { class: "nmorph-table__header" }, u = ["data-src"], g = { class: "nmorph-table__table-row" }, x = { class: "nmorph-table__cell" }, S = ["tabindex"], R = ["id"], B = { key: 1 }, E = ["id"];
+function H(c, N, W, e, C, I) {
   return r(), t("div", null, [
     (r(), t(
       "div",
       {
         ref: "nmorphDOMTable",
-        key: l.key,
-        class: _(l.modifiers),
-        style: a(l.tableStyle)
+        key: e.key,
+        class: _(e.modifiers),
+        style: n(e.tableStyle)
       },
       [
-        o("div", u, [
-          o("table", w, [
+        o("div", w, [
+          o("div", f, [
+            p(c.$slots, "default")
+          ]),
+          o("table", k, [
             o("colgroup", null, [
               (r(!0), t(
                 d,
                 null,
-                i(l.columns, (e) => (r(), t("col", {
-                  key: e.prop,
-                  style: a({ width: `${l.getWidth(e.width)}px` }),
-                  "data-src": `${l.getWidth(e.width)}px`
-                }, null, 12, f))),
+                i(e.columns, (l) => (r(), t("col", {
+                  key: l.prop,
+                  style: n({ width: `${e.getWidth(l.width)}px` }),
+                  "data-src": `${e.getWidth(l.width)}px`
+                }, null, 12, u))),
                 128
                 /* KEYED_FRAGMENT */
               ))
@@ -35,33 +41,33 @@ function E(c, H, N, l, C, I) {
                 (r(!0), t(
                   d,
                   null,
-                  i(l.columns, (e, b) => (r(), t(
+                  i(e.columns, (l, b) => (r(), t(
                     "th",
                     {
                       key: b,
-                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": l.props.bordered }])
+                      class: _(["nmorph-table__table-data", { "nmorph-table__table-data--bordered": e.props.bordered }])
                     },
                     [
-                      o("div", k, [
+                      o("div", x, [
                         o(
                           "div",
                           {
-                            style: a({ "justify-content": e.alignment }),
+                            style: n({ "justify-content": l.alignment }),
                             class: "nmorph-table__cell-content"
                           },
                           [
                             o(
                               "span",
                               null,
-                              s(e.label),
+                              s(l.label),
                               1
                               /* TEXT */
                             ),
-                            l.sortData && l.sortData[e.prop] ? (r(), m(l.NmorphSortButton, {
+                            e.sortData && e.sortData[l.prop] ? (r(), m(e.NmorphSortButton, {
                               key: 0,
                               class: "nmorph-table__button-wrapper",
-                              value: l.sortData[e.prop],
-                              onSort: (n) => l.onSort(n, e.prop)
+                              value: e.sortData[l.prop],
+                              onSort: (a) => e.onSort(a, l.prop)
                             }, null, 8, ["value", "onSort"])) : y("v-if", !0)
                           ],
                           4
@@ -79,30 +85,30 @@ function E(c, H, N, l, C, I) {
             ])
           ]),
           o("div", {
-            ref: l.virtualList.containerRef,
+            ref: e.virtualList.containerRef,
             class: _(["nmorph-table__body", {
-              "nmorph-table__body--virtual": l.virtualEnabled,
-              "nmorph-table__body--dynamic": l.props.virtualDynamicHeight
+              "nmorph-table__body--virtual": e.virtualEnabled,
+              "nmorph-table__body--dynamic": e.props.virtualDynamicHeight
             }]),
-            style: a(l.tableBodyStyle),
-            tabindex: l.virtualEnabled ? 0 : void 0,
+            style: n(e.tableBodyStyle),
+            tabindex: e.virtualEnabled ? 0 : void 0,
             role: "grid",
-            onKeydown: l.tableKeydownHandler,
-            onScroll: l.scrollHandler
+            onKeydown: e.tableKeydownHandler,
+            onScroll: e.scrollHandler
           }, [
-            l.virtualEnabled ? (r(), t(
+            e.virtualEnabled ? (r(), t(
               "div",
               {
                 key: 0,
                 class: "nmorph-table__virtual-spacer",
-                style: a(l.virtualSpacerStyle)
+                style: n(e.virtualSpacerStyle)
               },
               [
                 o(
                   "div",
                   {
                     class: "nmorph-table__virtual-content",
-                    style: a(l.virtualContentStyle)
+                    style: n(e.virtualContentStyle)
                   },
                   [
                     o("table", null, [
@@ -110,11 +116,11 @@ function E(c, H, N, l, C, I) {
                         (r(!0), t(
                           d,
                           null,
-                          i(l.columns, (e) => (r(), t(
+                          i(e.columns, (l) => (r(), t(
                             "col",
                             {
-                              key: e.prop,
-                              style: a({ width: `${l.getWidth(e.width)}px` })
+                              key: l.prop,
+                              style: n({ width: `${e.getWidth(l.width)}px` })
                             },
                             null,
                             4
@@ -128,15 +134,15 @@ function E(c, H, N, l, C, I) {
                         (r(!0), t(
                           d,
                           null,
-                          i(l.renderedRows, (e, b) => (r(), t(
+                          i(e.renderedRows, (l, b) => (r(), t(
                             "tr",
                             {
-                              key: e.index,
+                              key: l.index,
                               ref_for: !0,
-                              ref: (n) => l.setVirtualRowRef(n, e.index),
+                              ref: (a) => e.setVirtualRowRef(a, l.index),
                               class: _(["nmorph-table__table-data-row", {
-                                "nmorph-table__table-data-row--row-hover": l.props.rowHover,
-                                "nmorph-table__table-data-row--active": l.activeRowIndex === e.index
+                                "nmorph-table__table-data-row--row-hover": e.props.rowHover,
+                                "nmorph-table__table-data-row--active": e.activeRowIndex === l.index
                               }]),
                               role: "row"
                             },
@@ -144,18 +150,18 @@ function E(c, H, N, l, C, I) {
                               (r(!0), t(
                                 d,
                                 null,
-                                i(l.columns, (n) => (r(), t(
+                                i(e.columns, (a) => (r(), t(
                                   "td",
                                   {
-                                    key: n.prop,
-                                    class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
+                                    key: a.prop,
+                                    class: _([{ "nmorph-table__table-data--bordered": e.props.bordered }, "nmorph-table__table-data"])
                                   },
                                   [
                                     o("div", {
-                                      id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                      style: a({ "text-align": n.alignment }),
+                                      id: `table-cell-${e.tableIdentifier}-${b}-${a.prop}`,
+                                      style: n({ "text-align": a.alignment }),
                                       class: "nmorph-table__cell nmorph-table__cell--data"
-                                    }, s(l.tableData(e.item[n.prop])), 13, S)
+                                    }, s(e.tableData(l.item[a.prop])), 13, R)
                                   ],
                                   2
                                   /* CLASS */
@@ -171,29 +177,6 @@ function E(c, H, N, l, C, I) {
                           /* KEYED_FRAGMENT */
                         ))
                       ])
-                    ]),
-                    o("table", null, [
-                      o("colgroup", null, [
-                        (r(!0), t(
-                          d,
-                          null,
-                          i(l.columns, (e) => (r(), t(
-                            "col",
-                            {
-                              key: e.prop,
-                              style: a({ width: `${l.getWidth(e.width)}px` })
-                            },
-                            null,
-                            4
-                            /* STYLE */
-                          ))),
-                          128
-                          /* KEYED_FRAGMENT */
-                        ))
-                      ]),
-                      o("tbody", R, [
-                        h(c.$slots, "default")
-                      ])
                     ])
                   ],
                   4
@@ -202,99 +185,68 @@ function E(c, H, N, l, C, I) {
               ],
               4
               /* STYLE */
-            )) : (r(), t(
-              d,
-              { key: 1 },
-              [
-                o("table", null, [
-                  o("colgroup", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.columns, (e) => (r(), t(
-                        "col",
-                        {
-                          key: e.prop,
-                          style: a({ width: `${l.getWidth(e.width)}px` })
-                        },
-                        null,
-                        4
-                        /* STYLE */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ]),
-                  o("tbody", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.renderedRows, (e, b) => (r(), t(
-                        "tr",
-                        {
-                          key: b,
-                          class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": l.props.rowHover }])
-                        },
-                        [
-                          (r(!0), t(
-                            d,
-                            null,
-                            i(l.columns, (n) => (r(), t(
-                              "td",
-                              {
-                                key: n.prop,
-                                class: _([{ "nmorph-table__table-data--bordered": l.props.bordered }, "nmorph-table__table-data"])
-                              },
-                              [
-                                o("div", {
-                                  id: `table-cell-${l.tableIdentifier}-${b}-${n.prop}`,
-                                  style: a({ "text-align": n.alignment }),
-                                  class: "nmorph-table__cell nmorph-table__cell--data"
-                                }, s(l.tableData(e.item[n.prop])), 13, W)
-                              ],
-                              2
-                              /* CLASS */
-                            ))),
-                            128
-                            /* KEYED_FRAGMENT */
-                          ))
-                        ],
-                        2
-                        /* CLASS */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ])
-                ]),
-                o("table", null, [
-                  o("colgroup", null, [
-                    (r(!0), t(
-                      d,
-                      null,
-                      i(l.columns, (e) => (r(), t(
-                        "col",
-                        {
-                          key: e.prop,
-                          style: a({ width: `${l.getWidth(e.width)}px` })
-                        },
+            )) : (r(), t("table", B, [
+              o("colgroup", null, [
+                (r(!0), t(
+                  d,
+                  null,
+                  i(e.columns, (l) => (r(), t(
+                    "col",
+                    {
+                      key: l.prop,
+                      style: n({ width: `${e.getWidth(l.width)}px` })
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  ))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ]),
+              o("tbody", null, [
+                (r(!0), t(
+                  d,
+                  null,
+                  i(e.renderedRows, (l, b) => (r(), t(
+                    "tr",
+                    {
+                      key: b,
+                      class: _(["nmorph-table__table-data-row", { "nmorph-table__table-data-row--row-hover": e.props.rowHover }])
+                    },
+                    [
+                      (r(!0), t(
+                        d,
                         null,
-                        4
-                        /* STYLE */
-                      ))),
-                      128
-                      /* KEYED_FRAGMENT */
-                    ))
-                  ]),
-                  o("tbody", B, [
-                    h(c.$slots, "default")
-                  ])
-                ])
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            ))
-          ], 46, x)
+                        i(e.columns, (a) => (r(), t(
+                          "td",
+                          {
+                            key: a.prop,
+                            class: _([{ "nmorph-table__table-data--bordered": e.props.bordered }, "nmorph-table__table-data"])
+                          },
+                          [
+                            o("div", {
+                              id: `table-cell-${e.tableIdentifier}-${b}-${a.prop}`,
+                              style: n({ "text-align": a.alignment }),
+                              class: "nmorph-table__cell nmorph-table__cell--data"
+                            }, s(e.tableData(l.item[a.prop])), 13, E)
+                          ],
+                          2
+                          /* CLASS */
+                        ))),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ],
+                    2
+                    /* CLASS */
+                  ))),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]))
+          ], 46, S)
         ])
       ],
       6
@@ -302,7 +254,7 @@ function E(c, H, N, l, C, I) {
     ))
   ]);
 }
-const K = /* @__PURE__ */ v(p, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
+const K = /* @__PURE__ */ v(h, [["render", H], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-table/NmorphTable.vue"]]);
 export {
   K as default
 };

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css

@@ -1 +1 @@
-.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-private-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-private-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);box-shadow:var(--nmorph-shadow-outset);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-private-video-preview-width, 100%);height:var(--nmorph-private-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--embedded .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__play,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__play{box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-private-video-preview-width, 180px);height:var(--nmorph-private-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-private-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-private-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-video-preview-portal-width);height:var(--nmorph-private-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}
+.nmorph-video-preview{position:relative;display:flex;width:var(--nmorph-private-video-preview-width, 280px);min-width:0;max-width:100%;height:var(--nmorph-private-video-preview-height, 158px);overflow:hidden;color:var(--nmorph-white-color);background:color-mix(in srgb,var(--nmorph-black-color) 72%,var(--nmorph-main-color));border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-inset)}.nmorph-video-preview .nmorph-video-preview__media,.nmorph-video-preview .nmorph-video-preview__state{width:100%;height:100%}.nmorph-video-preview.nmorph-video-preview--soft .nmorph-video-preview__state,.nmorph-video-preview.nmorph-video-preview--plain .nmorph-video-preview__state{color:var(--nmorph-text-color)}.nmorph-video-preview .nmorph-video-preview__media{display:block;object-fit:cover}.nmorph-video-preview.nmorph-video-preview--contain .nmorph-video-preview__media{object-fit:contain}.nmorph-video-preview .nmorph-video-preview__state{position:absolute;inset:0;display:flex;flex-direction:column;gap:var(--indentation-02);justify-content:center;align-items:center;padding:var(--indentation-03);text-align:center;pointer-events:none}.nmorph-video-preview .nmorph-video-preview__error{max-width:100%;overflow:hidden;color:var(--nmorph-error-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__meta{position:absolute;right:0;bottom:0;left:0;display:flex;gap:var(--indentation-02);justify-content:space-between;align-items:center;padding:18px var(--indentation-03) var(--indentation-02);background:linear-gradient(transparent,color-mix(in srgb,var(--nmorph-black-color) 66%,transparent));pointer-events:none}.nmorph-video-preview .nmorph-video-preview__play{position:absolute;top:50%;left:50%;z-index:1;display:inline-flex;justify-content:center;align-items:center;width:42px;height:42px;padding:0;color:var(--nmorph-contrast-text-color);background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--border-radius-circular);transform:translate(-50%,-50%);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__play .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-video-preview .nmorph-video-preview__play:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview.nmorph-video-preview--playing .nmorph-video-preview__play{opacity:.72}.nmorph-video-preview.nmorph-video-preview--embedded{width:var(--nmorph-private-video-preview-width, 100%);height:var(--nmorph-private-video-preview-height, 120px);box-shadow:none}.nmorph-video-preview .nmorph-video-preview__name,.nmorph-video-preview .nmorph-video-preview__duration{min-width:0;overflow:hidden;font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:nowrap;text-overflow:ellipsis}.nmorph-video-preview .nmorph-video-preview__name{flex:1 1 auto}.nmorph-video-preview .nmorph-video-preview__duration{flex:0 0 auto;font-variant-numeric:tabular-nums}.nmorph-video-preview .nmorph-video-preview__actions{position:absolute;top:var(--indentation-02);right:var(--indentation-02);display:flex;gap:var(--indentation-01);padding:0;background:transparent}.nmorph-video-preview .nmorph-video-preview__action-button,.nmorph-video-preview .nmorph-video-preview__action-link{display:inline-flex;justify-content:center;align-items:center;width:22px;height:22px;padding:0;color:var(--nmorph-contrast-text-color);font:inherit;text-decoration:none;background:color-mix(in srgb,var(--nmorph-black-color) 58%,transparent);border:0;border-radius:var(--default-border-radius);cursor:pointer}.nmorph-video-preview .nmorph-video-preview__action-button:hover,.nmorph-video-preview .nmorph-video-preview__action-link:hover{background:color-mix(in srgb,var(--nmorph-black-color) 72%,transparent)}.nmorph-video-preview .nmorph-video-preview__action-button .nmorph-icon,.nmorph-video-preview .nmorph-video-preview__action-link .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-video-preview.nmorph-video-preview--compact{width:var(--nmorph-private-video-preview-width, 180px);height:var(--nmorph-private-video-preview-height, 102px)}.nmorph-video-preview.nmorph-video-preview--soft{background:color-mix(in srgb,var(--nmorph-accent-color) 6%,transparent);box-shadow:none}.nmorph-video-preview.nmorph-video-preview--plain{background:transparent;box-shadow:none}.nmorph-video-preview.nmorph-video-preview--error{outline:1px solid var(--nmorph-error-color)}.nmorph-video-preview__portal{display:contents}.nmorph-video-preview__portal .nmorph-video-preview__portal-content{--nmorph-private-video-preview-portal-width: min( calc(100vw - 96px) , 1080px);--nmorph-private-video-preview-portal-height: min( calc(100vh - 180px) , 720px);position:absolute;top:50%;left:50%;display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-video-preview-portal-width);height:var(--nmorph-private-video-preview-portal-height);transform:translate(-50%,-50%)}.nmorph-video-preview__portal .nmorph-video-preview__portal-media{display:block;width:100%;max-width:100%;height:100%;max-height:100%;object-fit:contain;background:var(--nmorph-black-color);border-radius:var(--default-border-radius)}

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue.js

@@ -21,7 +21,7 @@ const y = ["src", "poster", "controls", "muted", "playsinline", "preload"], w =
 }, O = {
   key: 4,
   class: "nmorph-video-preview__actions"
-}, I = ["aria-label"], P = ["aria-label"], g = ["href", "aria-label"], H = ["href", "download", "aria-label"], V = { class: "nmorph-video-preview__portal" }, L = { class: "nmorph-video-preview__portal-content" }, T = ["src", "poster", "muted", "playsinline", "preload"];
+}, I = ["aria-label"], P = ["aria-label"], g = ["href", "aria-label"], H = ["href", "download", "aria-label"], L = { class: "nmorph-video-preview__portal" }, V = { class: "nmorph-video-preview__portal-content" }, T = ["src", "poster", "muted", "playsinline", "preload"];
 function A(p, R, S, o, z, E) {
   return e(), r(
     t,
@@ -164,7 +164,7 @@ function A(p, R, S, o, z, E) {
               }, [
                 n(o.NmorphIcon, { size: "small" }, {
                   default: i(() => [
-                    n(o.NmorphIconOpen)
+                    n(o.NmorphIconExternalLink)
                   ]),
                   _: 1
                   /* STABLE */
@@ -196,7 +196,7 @@ function A(p, R, S, o, z, E) {
         key: 0,
         to: "body"
       }, [
-        d("div", V, [
+        d("div", L, [
           n(o.NmorphOverlay, {
             show: o.previewOpen,
             "disabled-teleport": "",
@@ -204,7 +204,7 @@ function A(p, R, S, o, z, E) {
             onOnEscapeKeydown: o.closePreviewHandler
           }, {
             default: i(() => [
-              d("div", L, [
+              d("div", V, [
                 d("video", {
                   class: "nmorph-video-preview__portal-media",
                   src: o.props.src,

package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue2.js

@@ -1,15 +1,15 @@
 import './NmorphVideoPreview.css';
-import { defineComponent as U, useAttrs as G, useSlots as J, ref as p, computed as t, watch as K } from "vue";
+import { defineComponent as U, useAttrs as G, useSlots as J, ref as f, computed as t, watch as K } from "vue";
 import { useModifiers as Q } from "../../../utils/create-modifiers.js";
 import { createCssSizeVariables as X } from "../../../utils/common.js";
 import Y from "../../../assets/icons/video.svg.js";
 import Z from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import ee from "../../../assets/icons/open.svg.js";
-import re from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import te from "../../../assets/icons/play.svg.js";
-import oe from "../../../assets/icons/pause.svg.js";
-import ae from "../../../assets/icons/loading.svg.js";
-import ne from "../../../assets/icons/full-screen.svg.js";
+import ee from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import re from "../../../assets/icons/play.svg.js";
+import te from "../../../assets/icons/pause.svg.js";
+import oe from "../../../assets/icons/loading.svg.js";
+import ae from "../../../assets/icons/full-screen.svg.js";
+import ne from "../../../assets/icons/external-link.svg.js";
 import le from "../../../assets/icons/eye.svg.js";
 import se from "../../../assets/icons/download.svg.js";
 const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U({
@@ -44,12 +44,12 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
     previewMode: { type: String, required: !1, default: "internal" }
   },
   emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
-  setup(P, { expose: O, emit: _ }) {
-    const e = P, n = _, u = G(), h = J(), l = p(null), f = p(!1), o = p(!1), s = p(!1), y = (r) => {
+  setup(P, { expose: _, emit: A }) {
+    const e = P, n = A, u = G(), h = J(), l = f(null), p = f(!1), o = f(!1), s = f(!1), y = (r) => {
       if (!r || r < 0) return "";
       const a = Math.round(r / 1e3), i = Math.floor(a / 60), m = a % 60;
       return `${i}:${m.toString().padStart(2, "0")}`;
-    }, A = t(() => y(e.durationMs)), d = t(() => !!e.src && !e.loading && !e.error), H = t(() => e.showPlaybackButton && d.value && s.value), F = t(
+    }, H = t(() => y(e.durationMs)), d = t(() => !!e.src && !e.loading && !e.error), O = t(() => e.showPlaybackButton && d.value && s.value), E = t(
       () => e.showPlaybackButton && e.preload === "metadata" ? "auto" : e.preload
     ), w = t(() => e.showFullscreenAction && d.value && !e.controls), g = t(() => d.value && (e.showPreviewAction || w.value)), N = t(() => e.showDefaultActions && (e.src || e.downloadHref)), q = t(() => !!h.actions || g.value || N.value), S = t(
       () => Q({
@@ -72,18 +72,18 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
         "--nmorph-private-video-preview-portal-width": e.previewWidth,
         "--nmorph-private-video-preview-portal-height": e.previewHeight
       })
-    ), E = t(() => Object.fromEntries(Object.entries(u).filter(([r]) => r !== "class" && r !== "style"))), C = t(() => [S.value, u.class]), D = t(() => [b.value, u.style]);
+    ), F = t(() => Object.fromEntries(Object.entries(u).filter(([r]) => r !== "class" && r !== "style"))), k = t(() => [S.value, u.class]), x = t(() => [b.value, u.style]);
     K(
       () => [e.src, e.loading, e.error],
       () => {
         o.value = !1, s.value = !1;
       }
     );
-    const M = () => n("open"), V = () => n("download"), k = () => {
-      e.previewMode === "internal" && (f.value = !0), n("preview");
-    }, x = () => {
-      f.value = !1;
-    }, L = async () => {
+    const C = () => n("open"), D = () => n("download"), L = () => {
+      e.previewMode === "internal" && (p.value = !0), n("preview");
+    }, M = () => {
+      p.value = !1;
+    }, V = async () => {
       const r = l.value;
       if (r) {
         n("fullscreen");
@@ -131,25 +131,25 @@ const ie = "var(--nmorph-contrast-text-color)", v = 0.25, Se = /* @__PURE__ */ U
     }, z = (r) => {
       o.value = !1, s.value = !1, n("error", r);
     };
-    O({ videoRef: l });
-    const B = { CONTRAST_ICON_COLOR: ie, VIDEO_BUFFER_EPSILON_SECONDS: v, props: e, emit: n, attrs: u, slots: h, videoRef: l, previewOpen: f, playing: o, videoLoaded: s, formatDuration: y, duration: A, mediaReady: d, showPlaybackControl: H, resolvedPreload: F, showFullscreenAction: w, hasPreviewActions: g, hasDefaultActions: N, hasActions: q, modifiers: S, styles: b, rootAttrs: E, rootClass: C, rootStyle: D, openHandler: M, downloadHandler: V, previewHandler: k, closePreviewHandler: x, fullscreenHandler: L, togglePlayback: R, isVideoFullyBuffered: I, updateVideoLoaded: j, playHandler: T, pauseHandler: W, endedHandler: $, errorHandler: z, get NmorphIcon() {
-      return re;
+    _({ videoRef: l });
+    const B = { CONTRAST_ICON_COLOR: ie, VIDEO_BUFFER_EPSILON_SECONDS: v, props: e, emit: n, attrs: u, slots: h, videoRef: l, previewOpen: p, playing: o, videoLoaded: s, formatDuration: y, duration: H, mediaReady: d, showPlaybackControl: O, resolvedPreload: E, showFullscreenAction: w, hasPreviewActions: g, hasDefaultActions: N, hasActions: q, modifiers: S, styles: b, rootAttrs: F, rootClass: k, rootStyle: x, openHandler: C, downloadHandler: D, previewHandler: L, closePreviewHandler: M, fullscreenHandler: V, togglePlayback: R, isVideoFullyBuffered: I, updateVideoLoaded: j, playHandler: T, pauseHandler: W, endedHandler: $, errorHandler: z, get NmorphIcon() {
+      return ee;
     }, get NmorphIconDownload() {
       return se;
     }, get NmorphIconEye() {
       return le;
-    }, get NmorphIconFullScreen() {
+    }, get NmorphIconExternalLink() {
       return ne;
-    }, get NmorphIconLoader() {
+    }, get NmorphIconFullScreen() {
       return ae;
-    }, get NmorphIconOpen() {
-      return ee;
+    }, get NmorphIconLoader() {
+      return oe;
     }, get NmorphOverlay() {
       return Z;
     }, get NmorphIconPause() {
-      return oe;
-    }, get NmorphIconPlay() {
       return te;
+    }, get NmorphIconPlay() {
+      return re;
     }, get NmorphIconVideo() {
       return Y;
     } };