npm - @ynput/ayon-frontend-shared - Versions diffs - 0.3.40 → 0.3.41 - Mend

@ynput/ayon-frontend-shared 0.3.40 → 0.3.41

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

Files changed (419) hide show

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.es.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { j as r } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { useRef as Z, useMemo as e } from "react";
-import { union as A, upperFirst as T } from "lodash";
+import { j as o } from "../../../../../../_virtual/jsx-runtime.es.js";
+import { useRef as y, useMemo as a } from "react";
+import { union as D, upperFirst as T } from "lodash";
 import c from "clsx";
-import { getTextColor as y } from "@ynput/ayon-react-components";
+import { getTextColor as tt } from "@ynput/ayon-react-components";
 import "../../../../components/AddonLoadingScreen/AddonLoadingScreen.es.js";
 import "../../../../../../node_modules/match-sorter/dist/match-sorter.esm.es.js";
 import "../../../../components/AccessSearchInput/AccessSearchInput.styled.es.js";
@@ -64,7 +64,7 @@ import "../../../../api/queries/activities/getMentions.es.js";
 import "../../../../api/queries/activities/getCategories.es.js";
 import "../../../../api/queries/addons/getAddons.es.js";
 import "../../../../api/queries/addons/updateAddons.es.js";
-import { useGetAttributeConfigQuery as tt } from "../../../../api/queries/attributes/getAttributes.es.js";
+import { useGetAttributeConfigQuery as ot } from "../../../../api/queries/attributes/getAttributes.es.js";
 import "../../../../api/queries/attributes/updateAttributes.es.js";
 import "../../../../api/queries/authentication/getAuthentication.es.js";
 import "../../../../api/queries/cloud/cloud.es.js";
@@ -133,11 +133,11 @@ import "../../../Feed/components/CommentInput/modules/index.es.js";
 import "../../../../context/RemoteModulesContext.es.js";
 import "../../../../../../_virtual/runtime.es.js";
 import "../../../../../../_virtual/semver.es.js";
-import { useScopedStatuses as ot } from "../../../../hooks/useScopedStatuses.es.js";
-import { useEntityUpdate as it } from "../../../../hooks/useEntityUpdate.es.js";
+import { useScopedStatuses as it } from "../../../../hooks/useScopedStatuses.es.js";
+import { useEntityUpdate as mt } from "../../../../hooks/useEntityUpdate.es.js";
 import "react-redux";
 import "custom-protocol-check";
-import { useDetailsPanelContext as mt } from "../../../../context/DetailsPanelContext.es.js";
+import { useDetailsPanelContext as pt } from "../../../../context/DetailsPanelContext.es.js";
 import "../../../../context/PowerpackContextInstance.es.js";
 import "../../../../context/SubtasksModulesContextInstance.es.js";
 import "../../../../context/ThumbnailUploaderContext.es.js";
@@ -163,7 +163,7 @@ import "../../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.j
 import "@dnd-kit/core";
 import "@dnd-kit/sortable";
 import "../../../../components/EnumEditor/EnumEditor.styled.es.js";
-import { EntityPanelUploader as pt } from "../../../../components/EntityPanelUploader/EntityPanelUploader.es.js";
+import { EntityPanelUploader as st } from "../../../../components/EntityPanelUploader/EntityPanelUploader.es.js";
 import "../../../../components/EntityPath/EntityPath.styled.es.js";
 import "../../../../components/EntityPath/SegmentProvider.es.js";
 import "../../../../components/FeaturedVersionOrder/FeaturedVersionOrder.es.js";
@@ -244,18 +244,20 @@ import "../../../Slicer/components/Slicer.es.js";
 import "../../../Slicer/context/SlicerContext.es.js";
 import "../../../Slicer/hooks/useTableDataBySlice.es.js";
 import "../../DetailsPanel.styled.es.js";
-import st from "../DetailsPanelTabs/DetailsPanelTabs.es.js";
-import { HeaderContainer as at, Grid as et, Header as lt, Content as nt, Title as dt, TagsSelect as ct, StatusSelect as ut, AssigneeSelect as gt, PriorityEnumDropdown as ht } from "./DetailsPanelHeader.styled.es.js";
-import ft from "../../helpers/getThumbnails.es.js";
-import { buildDetailsPanelTitles as jt } from "../../helpers/buildDetailsPanelTitles.es.js";
-import { PlayableIcon as xt } from "../../../../components/PlayableIcon/PlayableIcon.es.js";
+import et from "../DetailsPanelTabs/DetailsPanelTabs.es.js";
+import at from "./LinkedTaskRow.es.js";
+import { HeaderContainer as lt, Grid as nt, Header as dt, Content as ct, Title as ut, TagsSelect as gt, StatusSelect as ht, AssigneeSelect as ft, PriorityEnumDropdown as jt } from "./DetailsPanelHeader.styled.es.js";
+import xt from "../../helpers/getThumbnails.es.js";
+import vt from "../../helpers/buildEntityTypeIcons.es.js";
+import { buildDetailsPanelTitles as bt } from "../../helpers/buildDetailsPanelTitles.es.js";
+import { PlayableIcon as Nt } from "../../../../components/PlayableIcon/PlayableIcon.es.js";
 import "../DetailsPanelFiles/DetailsPanelFiles.es.js";
 import "../DetailsPanelMoreMenu/components/ShareDialog.es.js";
 import "../TabHeaderAndFilters/TabHeaderAndFilters.styled.es.js";
 import "../SubtasksSearchFilter/SubtasksSearchFilter.es.js";
 import "../DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
 import "../DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
-import { Actions as vt } from "../../../Actions/Actions.es.js";
+import { Actions as St } from "../../../Actions/Actions.es.js";
 import "../../../Views/ViewsMenu/ViewsMenu.es.js";
 import "../../../Views/context/ViewsContextInstance.es.js";
 import "../../../Views/Views.styled.es.js";
@@ -282,7 +284,7 @@ import "../../../../components/SimpleFormDialog/SimpleFormDialog.es.js";
 import "../../../../components/StyledLink/StyledLink.es.js";
 import "../../../../components/TableGridSwitch/TableGridSwitch.es.js";
 import "../../../../components/Thumbnail/Thumbnail.styled.es.js";
-import { StackedThumbnails as bt } from "../../../../components/Thumbnail/StackedThumbnails.es.js";
+import { StackedThumbnails as kt } from "../../../../components/Thumbnail/StackedThumbnails.es.js";
 import "../../../../components/ThumbnailSimple/ThumbnailSimple.es.js";
 import "../../../../components/VersionUploader/components/UploadVersionDialog.es.js";
 import "../../../../components/VersionUploader/context/VersionUploadContext.es.js";
@@ -291,44 +293,44 @@ import "../../../../components/Menu/Menu.styled.es.js";
 import "../../../../components/Menu/MenuItem.es.js";
 import "../../../../components/ReviewablesSelector/ReviewablesSelector.es.js";
 import "../../../../components/ColumnHeaderMenuUI.es.js";
-const zp = ({
-  entityType: i,
-  entitySubTypes: D,
-  entities: o = [],
+const Yp = ({
+  entityType: r,
+  entitySubTypes: I,
+  entities: i = [],
   disabledAssignees: O = [],
-  users: g = [],
-  disabledStatuses: I,
-  tagsOptions: h = [],
-  isFetching: f,
+  users: f = [],
+  disabledStatuses: E,
+  tagsOptions: j = [],
+  isFetching: x,
   isCompact: n = !1,
-  currentTab: E,
-  onTabChange: w,
-  entityTypeIcons: j,
-  onOpenViewer: M,
+  currentTab: w,
+  onTabChange: M,
+  projectInfo: u,
+  onOpenViewer: R,
   onEntityFocus: U,
   thumbnailInputRef: V,
-  versionsInputRef: R
+  versionsInputRef: H
 }) => {
-  const { useSearchParams: H, useNavigate: G, isDeveloperMode: L } = mt(), K = G(), [Q, W] = H(), _ = Z(null), u = ot(
-    o.map((t) => t.projectName),
-    [i]
-  ), l = e(
-    () => A(
-      ...o.flatMap((t) => [
+  const { useSearchParams: L, useNavigate: G, isDeveloperMode: K } = pt(), Q = G(), [W, _] = L(), $ = y(null), v = a(() => vt(u), [u]), g = it(
+    i.map((t) => t.projectName),
+    [r]
+  ), l = a(
+    () => D(
+      ...i.flatMap((t) => [
         t.task?.assignees || [],
         t.version?.author || []
       ])
     ),
-    [o]
+    [i]
   );
-  let p = o[0];
-  const s = o.length === 0 || !p || f;
-  p || (p = {
+  let m = i[0];
+  const s = i.length === 0 || !m || x;
+  m || (m = {
     parents: [],
     id: "placeholder",
     name: "loading...",
     label: "loading...",
-    entityType: i,
+    entityType: r,
     status: "loading",
     projectName: "loading...",
     tags: [],
@@ -338,73 +340,73 @@ const zp = ({
     updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
     path: ""
   });
-  const x = o.length > 1 ? void 0 : p?.projectName;
-  o.filter((t) => t.projectName === p?.projectName && t.id).map((t) => t.id);
-  const { data: $ } = tt({ attributeName: "priority" }), v = rt($, i), b = e(
-    () => ft(o, i, j),
-    [o, i, j]
-  ), N = e(() => o.map((t) => t.status), [o]), q = e(() => o.map((t) => t.attrib?.priority), [o]), z = e(() => o.map((t) => t.tags), [o]), B = e(
-    () => h.reduce((t, m) => (t[m.name] = m, t), {}),
-    [h]
-  ), S = o.length > 1, { updateEntity: F } = it({
-    entities: o.map((t) => ({
+  const b = i.length > 1 ? void 0 : m?.projectName;
+  i.filter((t) => t.projectName === m?.projectName && t.id).map((t) => t.id);
+  const { data: q } = ot({ attributeName: "priority" }), N = rt(q, r), S = a(
+    () => xt(i, r, v),
+    [i, r, v]
+  ), k = a(() => i.map((t) => t.status), [i]), z = a(() => i.map((t) => t.attrib?.priority), [i]), B = a(() => i.map((t) => t.tags), [i]), F = a(
+    () => j.reduce((t, p) => (t[p.name] = p, t), {}),
+    [j]
+  ), h = i.length > 1, { updateEntity: J } = mt({
+    entities: i.map((t) => ({
       id: t.id,
       projectName: t.projectName,
       users: t.task?.assignees || [],
       folderId: t.folder?.id,
       productId: t.product?.id
     })),
-    entityType: i
-  }), d = (t, m) => m == null ? console.error("value is null or undefined") : F(t, m), J = () => {
-    let t, m = p.id, a = i + "Id";
-    i === "version" && p.product?.id && (t = [p.id], m = p.product?.id, a = "productId"), m && M({
-      [a]: m,
-      projectName: x,
+    entityType: r
+  }), d = (t, p) => p == null ? console.error("value is null or undefined") : J(t, p), X = () => {
+    let t, p = m.id, e = r + "Id";
+    r === "version" && m.product?.id && (t = [m.id], p = m.product?.id, e = "productId"), p && R({
+      [e]: p,
+      projectName: b,
       versionIds: t
     });
-  }, P = ["task", "version", "representation"].includes(i) && (l.length > 0 || i === "task"), k = g.map((t) => t);
+  }, P = ["task", "version", "representation"].includes(r) && (l.length > 0 || r === "task"), C = f.map((t) => t);
   if (P) {
-    const t = g.map((a) => a.name), m = l.filter((a) => !t.includes(a));
-    m.length && k.push(...m.map((a) => ({ name: a, fullName: a })));
+    const t = f.map((e) => e.name), p = l.filter((e) => !t.includes(e));
+    p.length && C.push(...p.map((e) => ({ name: e, fullName: e })));
   }
-  const { title: X, subTitle: Y } = jt(o, i), C = u?.length !== 0 && u?.find((t) => t.name === N[0]);
-  return /* @__PURE__ */ r.jsx(at, { children: /* @__PURE__ */ r.jsx(
-    pt,
+  const { title: Y, subTitle: Z } = bt(i, r), A = g?.length !== 0 && g?.find((t) => t.name === k[0]);
+  return /* @__PURE__ */ o.jsx(lt, { children: /* @__PURE__ */ o.jsx(
+    st,
     {
-      entities: o,
-      entityType: i,
-      projectName: x,
+      entities: i,
+      entityType: r,
+      projectName: b,
       thumbnailInputRef: V,
-      versionsInputRef: R,
+      versionsInputRef: H,
       onVersionCreated: (t) => U?.(t, "version"),
-      children: /* @__PURE__ */ r.jsxs(et, { className: c("details-panel-header", { isCompact: n }), children: [
-        /* @__PURE__ */ r.jsxs(
-          lt,
+      children: /* @__PURE__ */ o.jsxs(nt, { className: c("details-panel-header", { isCompact: n }), children: [
+        /* @__PURE__ */ o.jsxs(
+          dt,
           {
             className: c("titles", { isCompact: n, loading: s }, "no-shimmer"),
             children: [
-              /* @__PURE__ */ r.jsxs("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ r.jsx(
-                  bt,
+              /* @__PURE__ */ o.jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ o.jsx(
+                  kt,
                   {
                     isLoading: s,
                     shimmer: s,
-                    thumbnails: b,
-                    onClick: b.length === 1 ? J : void 0,
+                    thumbnails: S,
+                    onClick: S.length === 1 ? X : void 0,
                     hoverIcon: "play_circle"
                   }
                 ),
-                !S && p?.hasReviewables && /* @__PURE__ */ r.jsx(xt, {})
+                !h && m?.hasReviewables && /* @__PURE__ */ o.jsx(Nt, {})
               ] }),
-              /* @__PURE__ */ r.jsxs(nt, { className: c({ loading: s }), children: [
-                /* @__PURE__ */ r.jsxs(dt, { children: [
-                  /* @__PURE__ */ r.jsx("h2", { children: X }),
-                  /* @__PURE__ */ r.jsx(
-                    ct,
+              /* @__PURE__ */ o.jsxs(ct, { className: c({ loading: s }), children: [
+                /* @__PURE__ */ o.jsxs(ut, { children: [
+                  /* @__PURE__ */ o.jsx("h2", { children: Y }),
+                  /* @__PURE__ */ o.jsx(
+                    gt,
                     {
-                      ref: _,
-                      value: A(...z),
-                      tags: B,
+                      ref: $,
+                      value: D(...B),
+                      tags: F,
                       options: [],
                       editable: !0,
                       editor: !0,
@@ -416,75 +418,83 @@ const zp = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ r.jsxs("div", { className: "sub-title", children: [
-                  /* @__PURE__ */ r.jsxs("span", { className: "entity-type", children: [
-                    T(i),
+                /* @__PURE__ */ o.jsxs("div", { className: "sub-title", children: [
+                  /* @__PURE__ */ o.jsxs("span", { className: "entity-type", children: [
+                    T(r),
                     " - "
                   ] }),
-                  /* @__PURE__ */ r.jsx("h3", { children: Y })
-                ] })
+                  /* @__PURE__ */ o.jsx("h3", { children: Z })
+                ] }),
+                r === "version" && !h && !s && m && /* @__PURE__ */ o.jsx(
+                  at,
+                  {
+                    entity: m,
+                    taskTypes: u.taskTypes
+                  },
+                  m.id
+                )
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ r.jsx(
-          ut,
+        /* @__PURE__ */ o.jsx(
+          ht,
           {
-            value: N,
-            options: u || [],
-            disabledValues: I,
+            value: k,
+            options: g || [],
+            disabledValues: E,
             invert: !0,
             style: { maxWidth: "unset" },
             onChange: (t) => d("status", t),
             className: c("status-select", { loading: s }),
             align: n ? "right" : "left",
-            $textColor: y(C !== void 0 ? C.color : "#OOO")
+            $textColor: tt(A !== void 0 ? A.color : "#OOO")
           }
         ),
-        !n && (!P || s ? /* @__PURE__ */ r.jsx("div", {}) : /* @__PURE__ */ r.jsx(
-          gt,
+        !n && (!P || s ? /* @__PURE__ */ o.jsx("div", {}) : /* @__PURE__ */ o.jsx(
+          ft,
           {
             value: l,
-            options: k,
+            options: C,
             disabledValues: O.map((t) => t.name),
-            isMultiple: S && l.length > 1 && i === "task",
-            readOnly: i !== "task",
-            emptyMessage: i === "task" ? "Assign user" : "",
+            isMultiple: h && l.length > 1 && r === "task",
+            readOnly: r !== "task",
+            emptyMessage: r === "task" ? "Assign user" : "",
             align: "right",
             onChange: (t) => d("assignees", t),
             className: "assignee-select",
-            "data-tooltip": l.length ? i === "task" ? "Assigned users" : "Author" : ""
+            "data-tooltip": l.length ? r === "task" ? "Assigned users" : "Author" : ""
           }
         )),
-        /* @__PURE__ */ r.jsx(
-          vt,
+        /* @__PURE__ */ o.jsx(
+          St,
           {
-            entities: o,
-            entityType: i,
-            entitySubTypes: D,
-            isLoadingEntity: !!f || !!s,
-            searchParams: Q,
-            isDeveloperMode: L,
-            onSetSearchParams: W,
-            onNavigate: K
+            entities: i,
+            entityType: r,
+            entitySubTypes: I,
+            isLoadingEntity: !!x || !!s,
+            searchParams: W,
+            isDeveloperMode: K,
+            onSetSearchParams: _,
+            onNavigate: Q
           }
         ),
-        v ? /* @__PURE__ */ r.jsx(
-          ht,
+        N ? /* @__PURE__ */ o.jsx(
+          jt,
           {
-            options: v,
+            options: N,
             placeholder: "No priority",
-            value: q,
+            value: z,
             onChange: (t) => d("attrib", { priority: t[0] }),
             align: "right"
           }
-        ) : /* @__PURE__ */ r.jsx("div", { style: { height: 32 } }),
-        /* @__PURE__ */ r.jsx(
-          st,
+        ) : /* @__PURE__ */ o.jsx("div", { style: { height: 32 } }),
+        /* @__PURE__ */ o.jsx(
+          et,
           {
-            entityType: i,
-            currentTab: E,
-            onTabChange: w,
+            entityType: r,
+            currentTab: w,
+            onTabChange: M,
             isLoading: s
           }
         )
@@ -493,6 +503,6 @@ const zp = ({
   ) });
 };
 export {
-  zp as default
+  Yp as default
 };
 //# sourceMappingURL=DetailsPanelHeader.es.js.map

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailsPanelHeader.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { RefObject, useMemo, useRef } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { DropdownRef, getTextColor } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetAttributeConfigQuery, Status } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport DetailsPanelTabs from '../DetailsPanelTabs/DetailsPanelTabs'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../../helpers/buildDetailsPanelTitles'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport type EntityTypeIcons = {\n folder: Record<string, string>\n task: Record<string, string>\n product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n entityType: 'folder' \| 'task' \| 'version' \| 'representation'\n entitySubTypes: string[]\n entities: DetailsPanelEntityData[]\n disabledAssignees?: any[]\n users?: any[]\n disabledStatuses?: string[]\n tagsOptions?: any[]\n isFetching?: boolean\n isCompact?: boolean\n currentTab: DetailsPanelTab\n onTabChange: (tab: DetailsPanelTab) => void\n onOpenViewer: (args: any) => void\n onEntityFocus: DetailsPanelProps['onEntityFocus']\n entityTypeIcons: EntityTypeIcons\n thumbnailInputRef: RefObject<HTMLInputElement>\n versionsInputRef: RefObject<HTMLInputElement>\n}\n\nconst DetailsPanelHeader = ({\n entityType,\n entitySubTypes,\n entities = [],\n disabledAssignees = [],\n users = [],\n disabledStatuses,\n tagsOptions = [],\n isFetching,\n isCompact = false,\n currentTab,\n onTabChange,\n entityTypeIcons,\n onOpenViewer,\n onEntityFocus,\n thumbnailInputRef,\n versionsInputRef,\n}: DetailsPanelHeaderProps) => {\n const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext()\n const navigate = useNavigate()\n const [searchParams, setSearchParams] = useSearchParams()\n const tagsSelectRef = useRef<DropdownRef>(null)\n\n const statuses = useScopedStatuses(\n entities.map((entity) => entity.projectName),\n [entityType],\n )\n\n // for selected entities, get flat list of assignees\n const entityUsers: string[] = useMemo(\n () =>\n union(\n ...entities.flatMap((entity) => [\n entity.task?.assignees \|\| [],\n entity.version?.author \|\| [],\n ]),\n ),\n [entities],\n )\n\n let firstEntity = entities[0]\n // If there's no data return null\n const isLoading = entities.length === 0 \|\| !firstEntity \|\| isFetching\n // placeholder entity\n if (!firstEntity) {\n firstEntity = {\n parents: [],\n id: 'placeholder',\n name: 'loading...',\n label: 'loading...',\n entityType,\n status: 'loading',\n projectName: 'loading...',\n tags: [],\n hasReviewables: false,\n attrib: {},\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n path: '',\n }\n }\n\n const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n const entityIds = entities\n .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n .map((entity) => entity.id)\n\n // get priorities\n // get priority attribute so we know the colors and icons for each priority\n const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n const thumbnails = useMemo(\n () => getThumbnails(entities, entityType, entityTypeIcons),\n [entities, entityType, entityTypeIcons],\n )\n\n const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n const tagsOptionsObject = useMemo(\n () =>\n tagsOptions.reduce((acc, tag) => {\n acc[tag.name] = tag\n return acc\n }, {}),\n [tagsOptions],\n )\n\n const isMultiple = entities.length > 1\n\n const { updateEntity } = useEntityUpdate({\n entities: entities.map((e) => ({\n id: e.id,\n projectName: e.projectName,\n users: e.task?.assignees \|\| [],\n folderId: e.folder?.id,\n productId: e.product?.id,\n })),\n entityType,\n })\n\n const handleUpdate = (field: string, value: any) => {\n if (value === null \|\| value === undefined) return console.error('value is null or undefined')\n return updateEntity(field, value)\n }\n\n const handleThumbnailClick = () => {\n let versionIds,\n id = firstEntity.id,\n entityTypeKey = entityType + 'Id'\n\n if (entityType === 'version' && firstEntity.product?.id) {\n versionIds = [firstEntity.id]\n id = firstEntity.product?.id\n entityTypeKey = 'productId'\n }\n\n if (id) {\n onOpenViewer({\n [entityTypeKey]: id,\n projectName,\n versionIds,\n })\n }\n }\n\n const hasUser =\n ['task', 'version', 'representation'].includes(entityType) &&\n (entityUsers.length > 0 \|\| entityType === 'task')\n\n const usersOptions = users.map((u) => u)\n if (hasUser) {\n // check if all users are in options, otherwise add them\n const allUsers = users.map((u) => u.name)\n const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n if (usersToAdd.length) {\n usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n }\n }\n\n // Get title and subtitle from the imported function\n const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n const status =\n statuses?.length !== 0 && statuses?.find((status) => status.name === statusesValue[0])\n return (\n <Styled.HeaderContainer>\n <EntityPanelUploader\n entities={entities}\n entityType={entityType}\n projectName={projectName}\n thumbnailInputRef={thumbnailInputRef}\n versionsInputRef={versionsInputRef}\n onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n >\n <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n <Styled.Header\n className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n >\n <div style={{ position: 'relative' }}>\n <StackedThumbnails\n isLoading={isLoading}\n shimmer={isLoading}\n thumbnails={thumbnails}\n onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n hoverIcon={'play_circle'}\n />\n {!isMultiple && firstEntity?.hasReviewables && <PlayableIcon />}\n </div>\n <Styled.Content className={clsx({ loading: isLoading })}>\n <Styled.Title>\n <h2>{title}</h2>\n <Styled.TagsSelect\n ref={tagsSelectRef}\n value={union(...tagsValues)}\n tags={tagsOptionsObject}\n options={[]}\n editable\n editor\n onChange={(value) => handleUpdate('tags', value)}\n align=\"right\"\n styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n className=\"tags-select\"\n itemClassName=\"details-tag\"\n />\n </Styled.Title>\n <div className=\"sub-title\">\n <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n <h3>{subTitle}</h3>\n </div>\n </Styled.Content>\n </Styled.Header>\n <Styled.StatusSelect\n value={statusesValue}\n options={statuses \|\| []}\n disabledValues={disabledStatuses}\n invert\n style={{ maxWidth: 'unset' }}\n onChange={(value) => handleUpdate('status', value)}\n className={clsx('status-select', { loading: isLoading })}\n align={isCompact ? 'right' : 'left'}\n $textColor={getTextColor(status !== undefined ? (status as Status).color : '#OOO')}\n />\n {!isCompact &&\n (!hasUser \|\| isLoading ? (\n <div></div>\n ) : (\n <Styled.AssigneeSelect\n value={entityUsers}\n options={usersOptions}\n disabledValues={disabledAssignees.map((u) => u.name)}\n isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n readOnly={entityType !== 'task'}\n emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n align=\"right\"\n onChange={(value) => handleUpdate('assignees', value)}\n className=\"assignee-select\"\n data-tooltip={\n entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n }\n />\n ))}\n <Actions\n entities={entities}\n entityType={entityType}\n entitySubTypes={entitySubTypes}\n isLoadingEntity={!!isFetching \|\| !!isLoading}\n searchParams={searchParams}\n isDeveloperMode={isDeveloperMode}\n onSetSearchParams={setSearchParams}\n onNavigate={navigate}\n />\n {priorities ? (\n <Styled.PriorityEnumDropdown\n options={priorities}\n placeholder=\"No priority\"\n value={priorityValues}\n onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n align=\"right\"\n />\n ) : (\n <div style={{ height: 32 }}></div>\n )}\n <DetailsPanelTabs\n entityType={entityType}\n currentTab={currentTab}\n onTabChange={onTabChange}\n isLoading={isLoading}\n />\n </Styled.Grid>\n </EntityPanelUploader>\n </Styled.HeaderContainer>\n )\n}\n\nexport default DetailsPanelHeader\n"],"names":["DetailsPanelHeader","entityType","entitySubTypes","entities","disabledAssignees","users","disabledStatuses","tagsOptions","isFetching","isCompact","currentTab","onTabChange","entityTypeIcons","onOpenViewer","onEntityFocus","thumbnailInputRef","versionsInputRef","useSearchParams","useNavigate","isDeveloperMode","useDetailsPanelContext","navigate","searchParams","setSearchParams","tagsSelectRef","useRef","statuses","useScopedStatuses","entity","entityUsers","useMemo","union","firstEntity","isLoading","projectName","e","priorityAttrib","useGetAttributeConfigQuery","priorities","getPriorityOptions","thumbnails","getThumbnails","statusesValue","priorityValues","tagsValues","tagsOptionsObject","acc","tag","isMultiple","updateEntity","useEntityUpdate","handleUpdate","field","value","handleThumbnailClick","versionIds","id","entityTypeKey","hasUser","usersOptions","u","allUsers","usersToAdd","title","subTitle","buildDetailsPanelTitles","status","jsx","Styled.HeaderContainer","EntityPanelUploader","jsxs","Styled.Grid","clsx","Styled.Header","StackedThumbnails","PlayableIcon","Styled.Content","Styled.Title","Styled.TagsSelect","upperFirst","Styled.StatusSelect","getTextColor","Styled.AssigneeSelect","Actions","Styled.PriorityEnumDropdown","DetailsPanelTabs"],"mappings":"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"}
1	+ {"version":3,"file":"DetailsPanelHeader.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { RefObject, useMemo, useRef } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { DropdownRef, getTextColor } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetAttributeConfigQuery, Status } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport DetailsPanelTabs from '../DetailsPanelTabs/DetailsPanelTabs'\nimport LinkedTaskRow from './LinkedTaskRow'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../../helpers/getThumbnails'\nimport buildEntityTypeIcons from '../../helpers/buildEntityTypeIcons'\nimport type { ProjectInfo } from '../../helpers/mergeProjectInfo'\nimport { buildDetailsPanelTitles } from '../../helpers/buildDetailsPanelTitles'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport type EntityTypeIcons = {\n folder: Record<string, string>\n task: Record<string, string>\n product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n entityType: 'folder' \| 'task' \| 'version' \| 'representation'\n entitySubTypes: string[]\n entities: DetailsPanelEntityData[]\n disabledAssignees?: any[]\n users?: any[]\n disabledStatuses?: string[]\n tagsOptions?: any[]\n isFetching?: boolean\n isCompact?: boolean\n currentTab: DetailsPanelTab\n onTabChange: (tab: DetailsPanelTab) => void\n onOpenViewer: (args: any) => void\n onEntityFocus: DetailsPanelProps['onEntityFocus']\n projectInfo: ProjectInfo\n thumbnailInputRef: RefObject<HTMLInputElement>\n versionsInputRef: RefObject<HTMLInputElement>\n}\n\nconst DetailsPanelHeader = ({\n entityType,\n entitySubTypes,\n entities = [],\n disabledAssignees = [],\n users = [],\n disabledStatuses,\n tagsOptions = [],\n isFetching,\n isCompact = false,\n currentTab,\n onTabChange,\n projectInfo,\n onOpenViewer,\n onEntityFocus,\n thumbnailInputRef,\n versionsInputRef,\n}: DetailsPanelHeaderProps) => {\n const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext()\n const navigate = useNavigate()\n const [searchParams, setSearchParams] = useSearchParams()\n const tagsSelectRef = useRef<DropdownRef>(null)\n\n const entityTypeIcons = useMemo(() => buildEntityTypeIcons(projectInfo), [projectInfo])\n\n const statuses = useScopedStatuses(\n entities.map((entity) => entity.projectName),\n [entityType],\n )\n\n // for selected entities, get flat list of assignees\n const entityUsers: string[] = useMemo(\n () =>\n union(\n ...entities.flatMap((entity) => [\n entity.task?.assignees \|\| [],\n entity.version?.author \|\| [],\n ]),\n ),\n [entities],\n )\n\n let firstEntity = entities[0]\n // If there's no data return null\n const isLoading = entities.length === 0 \|\| !firstEntity \|\| isFetching\n // placeholder entity\n if (!firstEntity) {\n firstEntity = {\n parents: [],\n id: 'placeholder',\n name: 'loading...',\n label: 'loading...',\n entityType,\n status: 'loading',\n projectName: 'loading...',\n tags: [],\n hasReviewables: false,\n attrib: {},\n createdAt: new Date().toISOString(),\n updatedAt: new Date().toISOString(),\n path: '',\n }\n }\n\n const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n const entityIds = entities\n .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n .map((entity) => entity.id)\n\n // get priorities\n // get priority attribute so we know the colors and icons for each priority\n const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n const thumbnails = useMemo(\n () => getThumbnails(entities, entityType, entityTypeIcons),\n [entities, entityType, entityTypeIcons],\n )\n\n const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n const tagsOptionsObject = useMemo(\n () =>\n tagsOptions.reduce((acc, tag) => {\n acc[tag.name] = tag\n return acc\n }, {}),\n [tagsOptions],\n )\n\n const isMultiple = entities.length > 1\n\n const { updateEntity } = useEntityUpdate({\n entities: entities.map((e) => ({\n id: e.id,\n projectName: e.projectName,\n users: e.task?.assignees \|\| [],\n folderId: e.folder?.id,\n productId: e.product?.id,\n })),\n entityType,\n })\n\n const handleUpdate = (field: string, value: any) => {\n if (value === null \|\| value === undefined) return console.error('value is null or undefined')\n return updateEntity(field, value)\n }\n\n const handleThumbnailClick = () => {\n let versionIds,\n id = firstEntity.id,\n entityTypeKey = entityType + 'Id'\n\n if (entityType === 'version' && firstEntity.product?.id) {\n versionIds = [firstEntity.id]\n id = firstEntity.product?.id\n entityTypeKey = 'productId'\n }\n\n if (id) {\n onOpenViewer({\n [entityTypeKey]: id,\n projectName,\n versionIds,\n })\n }\n }\n\n const hasUser =\n ['task', 'version', 'representation'].includes(entityType) &&\n (entityUsers.length > 0 \|\| entityType === 'task')\n\n const usersOptions = users.map((u) => u)\n if (hasUser) {\n // check if all users are in options, otherwise add them\n const allUsers = users.map((u) => u.name)\n const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n if (usersToAdd.length) {\n usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n }\n }\n\n // Get title and subtitle from the imported function\n const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n const status =\n statuses?.length !== 0 && statuses?.find((status) => status.name === statusesValue[0])\n return (\n <Styled.HeaderContainer>\n <EntityPanelUploader\n entities={entities}\n entityType={entityType}\n projectName={projectName}\n thumbnailInputRef={thumbnailInputRef}\n versionsInputRef={versionsInputRef}\n onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n >\n <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n <Styled.Header\n className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n >\n <div style={{ position: 'relative' }}>\n <StackedThumbnails\n isLoading={isLoading}\n shimmer={isLoading}\n thumbnails={thumbnails}\n onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n hoverIcon={'play_circle'}\n />\n {!isMultiple && firstEntity?.hasReviewables && <PlayableIcon />}\n </div>\n <Styled.Content className={clsx({ loading: isLoading })}>\n <Styled.Title>\n <h2>{title}</h2>\n <Styled.TagsSelect\n ref={tagsSelectRef}\n value={union(...tagsValues)}\n tags={tagsOptionsObject}\n options={[]}\n editable\n editor\n onChange={(value) => handleUpdate('tags', value)}\n align=\"right\"\n styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n className=\"tags-select\"\n itemClassName=\"details-tag\"\n />\n </Styled.Title>\n <div className=\"sub-title\">\n <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n <h3>{subTitle}</h3>\n </div>\n {entityType === 'version' && !isMultiple && !isLoading && firstEntity && (\n <LinkedTaskRow\n key={firstEntity.id}\n entity={firstEntity}\n taskTypes={projectInfo.taskTypes}\n />\n )}\n </Styled.Content>\n </Styled.Header>\n <Styled.StatusSelect\n value={statusesValue}\n options={statuses \|\| []}\n disabledValues={disabledStatuses}\n invert\n style={{ maxWidth: 'unset' }}\n onChange={(value) => handleUpdate('status', value)}\n className={clsx('status-select', { loading: isLoading })}\n align={isCompact ? 'right' : 'left'}\n $textColor={getTextColor(status !== undefined ? (status as Status).color : '#OOO')}\n />\n {!isCompact &&\n (!hasUser \|\| isLoading ? (\n <div></div>\n ) : (\n <Styled.AssigneeSelect\n value={entityUsers}\n options={usersOptions}\n disabledValues={disabledAssignees.map((u) => u.name)}\n isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n readOnly={entityType !== 'task'}\n emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n align=\"right\"\n onChange={(value) => handleUpdate('assignees', value)}\n className=\"assignee-select\"\n data-tooltip={\n entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n }\n />\n ))}\n <Actions\n entities={entities}\n entityType={entityType}\n entitySubTypes={entitySubTypes}\n isLoadingEntity={!!isFetching \|\| !!isLoading}\n searchParams={searchParams}\n isDeveloperMode={isDeveloperMode}\n onSetSearchParams={setSearchParams}\n onNavigate={navigate}\n />\n {priorities ? (\n <Styled.PriorityEnumDropdown\n options={priorities}\n placeholder=\"No priority\"\n value={priorityValues}\n onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n align=\"right\"\n />\n ) : (\n <div style={{ height: 32 }}></div>\n )}\n <DetailsPanelTabs\n entityType={entityType}\n currentTab={currentTab}\n onTabChange={onTabChange}\n isLoading={isLoading}\n />\n </Styled.Grid>\n </EntityPanelUploader>\n </Styled.HeaderContainer>\n )\n}\n\nexport default DetailsPanelHeader\n"],"names":["DetailsPanelHeader","entityType","entitySubTypes","entities","disabledAssignees","users","disabledStatuses","tagsOptions","isFetching","isCompact","currentTab","onTabChange","projectInfo","onOpenViewer","onEntityFocus","thumbnailInputRef","versionsInputRef","useSearchParams","useNavigate","isDeveloperMode","useDetailsPanelContext","navigate","searchParams","setSearchParams","tagsSelectRef","useRef","entityTypeIcons","useMemo","buildEntityTypeIcons","statuses","useScopedStatuses","entity","entityUsers","union","firstEntity","isLoading","projectName","e","priorityAttrib","useGetAttributeConfigQuery","priorities","getPriorityOptions","thumbnails","getThumbnails","statusesValue","priorityValues","tagsValues","tagsOptionsObject","acc","tag","isMultiple","updateEntity","useEntityUpdate","handleUpdate","field","value","handleThumbnailClick","versionIds","id","entityTypeKey","hasUser","usersOptions","u","allUsers","usersToAdd","title","subTitle","buildDetailsPanelTitles","status","jsx","Styled.HeaderContainer","EntityPanelUploader","jsxs","Styled.Grid","clsx","Styled.Header","StackedThumbnails","PlayableIcon","Styled.Content","Styled.Title","Styled.TagsSelect","upperFirst","LinkedTaskRow","Styled.StatusSelect","getTextColor","Styled.AssigneeSelect","Actions","Styled.PriorityEnumDropdown","DetailsPanelTabs"],"mappings":"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"}

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),t=require("@ynput/ayon-react-components"),n=e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),t=require("@ynput/ayon-react-components"),i=e.div`
   position: relative;
 `,o=e.div`
   position: relative;
@@ -40,7 +40,7 @@
   z-index: 50;
 `,l=e.header`
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--base-gap-large);
   z-index: 50;
@@ -135,13 +135,13 @@
     padding-right: 8px;
     width: calc(100% - 1px);
     margin-bottom: 2px;
-    color: ${i=>i.$textColor};
+    color: ${n=>n.$textColor};
   }
 `,u=e(t.AssigneeSelect)`
   width: fit-content;
   justify-self: end;
   max-width: 100%;
-`,f=e(t.TagsSelect)`
+`,m=e(t.TagsSelect)`
   height: 24px;
   .template-value {
     padding: 0 2px;
@@ -155,7 +155,7 @@
       display: none;
     }
   }
-`,m=e(t.EnumDropdown)`
+`,f=e(t.EnumDropdown)`
   width: max-content;
   justify-self: end;
   /* remove text and dropdown icon */
@@ -184,5 +184,5 @@
   align-items: center;
   gap: var(--base-gap-small);
   justify-content: space-between;
-`;exports.AssigneeSelect=u;exports.CloseButton=a;exports.Content=d;exports.ContentRow=p;exports.Footer=h;exports.Grid=o;exports.Header=l;exports.HeaderContainer=n;exports.LabelWrapper=c;exports.PriorityEnumDropdown=m;exports.StatusSelect=g;exports.TagsSelect=f;exports.ThumbnailWrapper=r;exports.Title=s;
+`;exports.AssigneeSelect=u;exports.CloseButton=a;exports.Content=d;exports.ContentRow=p;exports.Footer=h;exports.Grid=o;exports.Header=l;exports.HeaderContainer=i;exports.LabelWrapper=c;exports.PriorityEnumDropdown=f;exports.StatusSelect=g;exports.TagsSelect=m;exports.ThumbnailWrapper=r;exports.Title=s;
 //# sourceMappingURL=DetailsPanelHeader.styled.cjs.js.map

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailsPanelHeader.styled.cjs.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n Button,\n AssigneeSelect as AssigneeSelectComponent,\n TagsSelect as TagsSelectComponent,\n StatusSelect as StatusSelectComponent,\n EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n position: relative;\n`\n\nexport const Grid = styled.div`\n position: relative;\n padding: 8px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n flex: none;\n overflow: hidden;\n\n display: grid;\n /* two columns /\n grid-template-columns: 1fr 1fr;\n gap: var(--base-gap-large);\n\n / set full widths for different elements /\n .path,\n .titles,\n .filters {\n grid-column: span 2;\n }\n\n &.isCompact {\n / hide fields when compact /\n .assignee-select,\n .tags-select,\n .actions,\n .filters {\n display: none;\n }\n / right column auto size /\n grid-template-columns: 1fr auto;\n / align center /\n align-items: center;\n }\n`\n\nexport const CloseButton = styled(Button)`\n position: absolute;\n right: 4px;\n top: 4px;\n width: fit-content;\n z-index: 50;\n`\n\nexport const Header = styled.header`\n display: flex;\n align-items: ~~flex-start~~;\n gap: var(--base-gap-large);\n z-index: 50;\n\n .entity-type {\n min-width: fit-content;\n }\n\n &.loading {\n .playable {\n display: none;\n }\n }\n`\n\nexport const Title = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n h2 {\n min-width: fit-content;\n }\n`\n\nexport const ThumbnailWrapper = styled.div`\n position: relative;\n height: 100%;\n\n &:hover {\n .playable {\n opacity: 0.8;\n }\n }\n & > div {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--base-gap-small);\n }\n`\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n position: relative;\n border-radius: var(--border-radius-m);\n\n h2 {\n margin: 0;\n }\n\n h3 {\n display: block;\n margin: 0;\n border: none;\n padding: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.loading {\n width: 70%;\n\n h2,\n h3,\n .sub-title {\n white-space: nowrap;\n }\n }\n\n .sub-title {\n display: flex;\n align-items: center;\n gap: var(--base-gap-medium);\n }\n`\n\nexport const ContentRow = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n\n label {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport const LabelWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\ninterface StatusSelectProps {\n $textColor: string\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n width: fit-content;\n .status-field.value {\n position: relative;\n left: 1px;\n height: 28px;\n padding-right: 8px;\n width: calc(100% - 1px);\n margin-bottom: 2px;\n color: ${(props) => props.$textColor};\n }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n width: fit-content;\n justify-self: end;\n max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n height: 24px;\n .template-value {\n padding: 0 2px;\n }\n .tag {\n padding: 0 4px;\n }\n .placeholder {\n padding: 0 2px;\n span:not(.icon) {\n display: none;\n }\n }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n width: max-content;\n justify-self: end;\n / remove text and dropdown icon */\n .control {\n display: none;\n }\n\n .template-value {\n border: none;\n padding: 0;\n & > div {\n justify-content: center;\n }\n }\n\n button {\n padding: 0 8px;\n background-color: unset;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-low-hover);\n }\n }\n`\n\nexport const Footer = styled.footer`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":"+JASaA,EAAkBC,EAAO;AAAA;AAAA,EAIzBC,EAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdE,EAAcF,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BC,EAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBK,EAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUfM,EAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1BO,EAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwCjBQ,EAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpBS,EAAeT,EAAO;AAAA;AAAA;AAAA,EAOtBU,EAAeV,EAAOW,cAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS1CC,GAAUA,EAAM,UAAU;AAAA;AAAA,EAI3BC,EAAiBb,EAAOc,gBAAuB;AAAA;AAAA;AAAA;AAAA,EAK/CC,EAAaf,EAAOgB,YAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvCC,EAAuBjB,EAAOkB,cAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0B1CC,EAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"DetailsPanelHeader.styled.cjs.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n Button,\n AssigneeSelect as AssigneeSelectComponent,\n TagsSelect as TagsSelectComponent,\n StatusSelect as StatusSelectComponent,\n EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n position: relative;\n`\n\nexport const Grid = styled.div`\n position: relative;\n padding: 8px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n flex: none;\n overflow: hidden;\n\n display: grid;\n /* two columns /\n grid-template-columns: 1fr 1fr;\n gap: var(--base-gap-large);\n\n / set full widths for different elements /\n .path,\n .titles,\n .filters {\n grid-column: span 2;\n }\n\n &.isCompact {\n / hide fields when compact /\n .assignee-select,\n .tags-select,\n .actions,\n .filters {\n display: none;\n }\n / right column auto size /\n grid-template-columns: 1fr auto;\n / align center /\n align-items: center;\n }\n`\n\nexport const CloseButton = styled(Button)`\n position: absolute;\n right: 4px;\n top: 4px;\n width: fit-content;\n z-index: 50;\n`\n\nexport const Header = styled.header`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n z-index: 50;\n\n .entity-type {\n min-width: fit-content;\n }\n\n &.loading {\n .playable {\n display: none;\n }\n }\n`\n\nexport const Title = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n h2 {\n min-width: fit-content;\n }\n`\n\nexport const ThumbnailWrapper = styled.div`\n position: relative;\n height: 100%;\n\n &:hover {\n .playable {\n opacity: 0.8;\n }\n }\n & > div {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--base-gap-small);\n }\n`\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n position: relative;\n border-radius: var(--border-radius-m);\n\n h2 {\n margin: 0;\n }\n\n h3 {\n display: block;\n margin: 0;\n border: none;\n padding: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.loading {\n width: 70%;\n\n h2,\n h3,\n .sub-title {\n white-space: nowrap;\n }\n }\n\n .sub-title {\n display: flex;\n align-items: center;\n gap: var(--base-gap-medium);\n }\n`\n\nexport const ContentRow = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n\n label {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport const LabelWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\ninterface StatusSelectProps {\n $textColor: string\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n width: fit-content;\n .status-field.value {\n position: relative;\n left: 1px;\n height: 28px;\n padding-right: 8px;\n width: calc(100% - 1px);\n margin-bottom: 2px;\n color: ${(props) => props.$textColor};\n }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n width: fit-content;\n justify-self: end;\n max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n height: 24px;\n .template-value {\n padding: 0 2px;\n }\n .tag {\n padding: 0 4px;\n }\n .placeholder {\n padding: 0 2px;\n span:not(.icon) {\n display: none;\n }\n }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n width: max-content;\n justify-self: end;\n / remove text and dropdown icon */\n .control {\n display: none;\n }\n\n .template-value {\n border: none;\n padding: 0;\n & > div {\n justify-content: center;\n }\n }\n\n button {\n padding: 0 8px;\n background-color: unset;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-low-hover);\n }\n }\n`\n\nexport const Footer = styled.footer`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":"+JASaA,EAAkBC,EAAO;AAAA;AAAA,EAIzBC,EAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdE,EAAcF,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BC,EAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBK,EAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUfM,EAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1BO,EAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwCjBQ,EAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpBS,EAAeT,EAAO;AAAA;AAAA;AAAA,EAOtBU,EAAeV,EAAOW,cAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS1CC,GAAUA,EAAM,UAAU;AAAA;AAAA,EAI3BC,EAAiBb,EAAOc,gBAAuB;AAAA;AAAA;AAAA;AAAA,EAK/CC,EAAaf,EAAOgB,YAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvCC,EAAuBjB,EAAOkB,cAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0B1CC,EAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.es.js CHANGED Viewed

@@ -42,7 +42,7 @@ const d = e.div`
   z-index: 50;
 `, g = e.header`
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--base-gap-large);
   z-index: 50;

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DetailsPanelHeader.styled.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n Button,\n AssigneeSelect as AssigneeSelectComponent,\n TagsSelect as TagsSelectComponent,\n StatusSelect as StatusSelectComponent,\n EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n position: relative;\n`\n\nexport const Grid = styled.div`\n position: relative;\n padding: 8px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n flex: none;\n overflow: hidden;\n\n display: grid;\n /* two columns /\n grid-template-columns: 1fr 1fr;\n gap: var(--base-gap-large);\n\n / set full widths for different elements /\n .path,\n .titles,\n .filters {\n grid-column: span 2;\n }\n\n &.isCompact {\n / hide fields when compact /\n .assignee-select,\n .tags-select,\n .actions,\n .filters {\n display: none;\n }\n / right column auto size /\n grid-template-columns: 1fr auto;\n / align center /\n align-items: center;\n }\n`\n\nexport const CloseButton = styled(Button)`\n position: absolute;\n right: 4px;\n top: 4px;\n width: fit-content;\n z-index: 50;\n`\n\nexport const Header = styled.header`\n display: flex;\n align-items: ~~flex-start~~;\n gap: var(--base-gap-large);\n z-index: 50;\n\n .entity-type {\n min-width: fit-content;\n }\n\n &.loading {\n .playable {\n display: none;\n }\n }\n`\n\nexport const Title = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n h2 {\n min-width: fit-content;\n }\n`\n\nexport const ThumbnailWrapper = styled.div`\n position: relative;\n height: 100%;\n\n &:hover {\n .playable {\n opacity: 0.8;\n }\n }\n & > div {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--base-gap-small);\n }\n`\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n position: relative;\n border-radius: var(--border-radius-m);\n\n h2 {\n margin: 0;\n }\n\n h3 {\n display: block;\n margin: 0;\n border: none;\n padding: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.loading {\n width: 70%;\n\n h2,\n h3,\n .sub-title {\n white-space: nowrap;\n }\n }\n\n .sub-title {\n display: flex;\n align-items: center;\n gap: var(--base-gap-medium);\n }\n`\n\nexport const ContentRow = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n\n label {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport const LabelWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\ninterface StatusSelectProps {\n $textColor: string\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n width: fit-content;\n .status-field.value {\n position: relative;\n left: 1px;\n height: 28px;\n padding-right: 8px;\n width: calc(100% - 1px);\n margin-bottom: 2px;\n color: ${(props) => props.$textColor};\n }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n width: fit-content;\n justify-self: end;\n max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n height: 24px;\n .template-value {\n padding: 0 2px;\n }\n .tag {\n padding: 0 4px;\n }\n .placeholder {\n padding: 0 2px;\n span:not(.icon) {\n display: none;\n }\n }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n width: max-content;\n justify-self: end;\n / remove text and dropdown icon */\n .control {\n display: none;\n }\n\n .template-value {\n border: none;\n padding: 0;\n & > div {\n justify-content: center;\n }\n }\n\n button {\n padding: 0 8px;\n background-color: unset;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-low-hover);\n }\n }\n`\n\nexport const Footer = styled.footer`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":";;AASO,MAAMA,IAAkBC,EAAO;AAAA;AAAA,GAIzBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdE,IAAcF,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBK,IAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUfM,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiB1BO,IAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwCjBQ,IAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWpBS,IAAeT,EAAO;AAAA;AAAA;AAAA,GAOtBU,IAAeV,EAAOW,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3C,CAACC,MAAUA,EAAM,UAAU;AAAA;AAAA,GAI3BC,IAAiBb,EAAOc,CAAuB;AAAA;AAAA;AAAA;AAAA,GAK/CC,IAAaf,EAAOgB,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBvCC,IAAuBjB,EAAOkB,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0B1CC,IAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"DetailsPanelHeader.styled.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n Button,\n AssigneeSelect as AssigneeSelectComponent,\n TagsSelect as TagsSelectComponent,\n StatusSelect as StatusSelectComponent,\n EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n position: relative;\n`\n\nexport const Grid = styled.div`\n position: relative;\n padding: 8px;\n border-bottom: 1px solid var(--md-sys-color-outline-variant);\n flex: none;\n overflow: hidden;\n\n display: grid;\n /* two columns /\n grid-template-columns: 1fr 1fr;\n gap: var(--base-gap-large);\n\n / set full widths for different elements /\n .path,\n .titles,\n .filters {\n grid-column: span 2;\n }\n\n &.isCompact {\n / hide fields when compact /\n .assignee-select,\n .tags-select,\n .actions,\n .filters {\n display: none;\n }\n / right column auto size /\n grid-template-columns: 1fr auto;\n / align center /\n align-items: center;\n }\n`\n\nexport const CloseButton = styled(Button)`\n position: absolute;\n right: 4px;\n top: 4px;\n width: fit-content;\n z-index: 50;\n`\n\nexport const Header = styled.header`\n display: flex;\n align-items: center;\n gap: var(--base-gap-large);\n z-index: 50;\n\n .entity-type {\n min-width: fit-content;\n }\n\n &.loading {\n .playable {\n display: none;\n }\n }\n`\n\nexport const Title = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n h2 {\n min-width: fit-content;\n }\n`\n\nexport const ThumbnailWrapper = styled.div`\n position: relative;\n height: 100%;\n\n &:hover {\n .playable {\n opacity: 0.8;\n }\n }\n & > div {\n height: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--base-gap-small);\n }\n`\n\nexport const Content = styled.div`\n display: flex;\n flex-direction: column;\n height: 100%;\n justify-content: center;\n overflow: hidden;\n position: relative;\n border-radius: var(--border-radius-m);\n\n h2 {\n margin: 0;\n }\n\n h3 {\n display: block;\n margin: 0;\n border: none;\n padding: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &.loading {\n width: 70%;\n\n h2,\n h3,\n .sub-title {\n white-space: nowrap;\n }\n }\n\n .sub-title {\n display: flex;\n align-items: center;\n gap: var(--base-gap-medium);\n }\n`\n\nexport const ContentRow = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n align-self: stretch;\n\n label {\n color: var(--md-sys-color-outline);\n }\n`\n\nexport const LabelWrapper = styled.div`\n display: flex;\n flex-direction: column;\n`\ninterface StatusSelectProps {\n $textColor: string\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n width: fit-content;\n .status-field.value {\n position: relative;\n left: 1px;\n height: 28px;\n padding-right: 8px;\n width: calc(100% - 1px);\n margin-bottom: 2px;\n color: ${(props) => props.$textColor};\n }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n width: fit-content;\n justify-self: end;\n max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n height: 24px;\n .template-value {\n padding: 0 2px;\n }\n .tag {\n padding: 0 4px;\n }\n .placeholder {\n padding: 0 2px;\n span:not(.icon) {\n display: none;\n }\n }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n width: max-content;\n justify-self: end;\n / remove text and dropdown icon */\n .control {\n display: none;\n }\n\n .template-value {\n border: none;\n padding: 0;\n & > div {\n justify-content: center;\n }\n }\n\n button {\n padding: 0 8px;\n background-color: unset;\n\n &:hover {\n background-color: var(--md-sys-color-surface-container-low-hover);\n }\n }\n`\n\nexport const Footer = styled.footer`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":";;AASO,MAAMA,IAAkBC,EAAO;AAAA;AAAA,GAIzBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdE,IAAcF,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBK,IAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUfM,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiB1BO,IAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwCjBQ,IAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWpBS,IAAeT,EAAO;AAAA;AAAA;AAAA,GAOtBU,IAAeV,EAAOW,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3C,CAACC,MAAUA,EAAM,UAAU;AAAA;AAAA,GAI3BC,IAAiBb,EAAOc,CAAuB;AAAA;AAAA;AAAA;AAAA,GAK/CC,IAAaf,EAAOgB,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBvCC,IAAuBjB,EAAOkB,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0B1CC,IAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}