@sankhyalabs/sankhyablocks 0.0.0-bugfix-dev-KB-131882.2 → 0.0.0-bugfix-dev-KB-174860.0

package/dist/collection/components/snk-dynaform/subcomponents/CardFormResizeObserver.js

@@ -0,0 +1,26 @@
+const BOUNDARY_FALSE_POSITIVE_VALUE = 14;
+export const cardFormResizeObserver = new ResizeObserver((entries) => {
+  var _a;
+  for (let entry of entries) {
+    const children = ((_a = entry === null || entry === void 0 ? void 0 : entry.target) === null || _a === void 0 ? void 0 : _a.children) || [];
+    const { parentElement } = (entry === null || entry === void 0 ? void 0 : entry.target) || {};
+    if (!(parentElement === null || parentElement === void 0 ? void 0 : parentElement.clientWidth))
+      return;
+    const limitWidth = parentElement.clientWidth - BOUNDARY_FALSE_POSITIVE_VALUE;
+    if (entry.target.hasChildNodes()) {
+      const listWidth = [];
+      for (const node of children)
+        listWidth.push(node);
+      listWidth.reduce((total, child) => {
+        const totalWidth = total + child.clientWidth;
+        if (totalWidth > limitWidth) {
+          child.style.visibility = 'hidden';
+        }
+        else {
+          child.style.visibility = 'visible';
+        }
+        return totalWidth;
+      }, 0);
+    }
+  }
+});

package/dist/collection/components/snk-dynaform/subcomponents/GuideBuilder.js

@@ -0,0 +1,51 @@
+import { FormMetadata } from "@sankhyalabs/ezui/dist/collection/utils/form";
+import { SnkMessageBuilder } from "../../../lib/message/SnkMessageBuilder";
+export class GuideBuilder {
+  constructor(parentGuide, formMetadata, dataUnit, messageBuilder) {
+    this._parentGuide = parentGuide;
+    this._formMetadata = formMetadata;
+    this._dataUnit = dataUnit;
+    this._messageBuilder = messageBuilder;
+    if (!this._messageBuilder) {
+      this._messageBuilder = new SnkMessageBuilder();
+    }
+  }
+  get id() {
+    return this._parentGuide.id;
+  }
+  getMessage(key, params) {
+    return this._messageBuilder.getMessage(key, params);
+  }
+  buildGuideItem(detailBuilders) {
+    const item = Object.assign({}, this._parentGuide);
+    delete item.expanded;
+    delete item.children;
+    const currentRecord = this._dataUnit.getSelectedRecord();
+    if (!currentRecord) {
+      return item;
+    }
+    const isNewRecord = this._dataUnit.isNewRecord(currentRecord.__record__id__);
+    const children = Array.from(this._formMetadata.getAllSheets().values()).map((sheet) => {
+      const { name, label } = sheet;
+      const isDetail = FormMetadata.getDetailName(name.split("::").pop()) != undefined;
+      const disabled = isDetail && isNewRecord;
+      const parentId = this._parentGuide.id;
+      const id = isDetail ? `${parentId}::${name}` : `${parentId}__FORM:${name}`;
+      if (isDetail && detailBuilders.has(id) && !disabled) {
+        const item = detailBuilders.get(id).buildGuideItem(detailBuilders);
+        return item;
+      }
+      return {
+        id,
+        label,
+        disabled,
+        tooltip: disabled ? this.getMessage("snkCrud.guide.tooltip.disabledDetail") : undefined
+      };
+    });
+    const newGuideItem = children.shift();
+    newGuideItem.label = isNewRecord ? this.getMessage("snkCrud.title.newRecord") : currentRecord.__record__label__;
+    newGuideItem.children = children;
+    item.children = [newGuideItem];
+    return item;
+  }
+}

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-detail-view/snk-dynaform-detail-view.css

@@ -0,0 +1,182 @@
+:host {
+  display: flex;
+  row-gap: 24px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--space--4, 4px);
+  scrollbar-width: auto;
+  scrollbar-color: var(--color--strokes, #E1E2E5) transparent;
+}
+
+:host::-webkit-scrollbar {
+  width: var(--space--14, 14px);
+  height: var(--space--14, 14px);
+}
+
+:host::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+:host::-webkit-scrollbar-thumb {
+  background-color: var(--color--strokes, #E1E2E5);
+  border-radius: var(--border--radius-100, 100px);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+:host::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color--petroleum-100, #C8CCD3);
+  background-clip: padding-box;
+}
+
+:host::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.level-path {
+  color: var(--color--title-primary, #2B3A54);
+  font-weight: var(--text-weight--medium, 400);
+  padding-right: 3px;
+}
+
+.grid-container {
+  min-height: 100px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  text-decoration: none;
+  border-radius: var(--border--radius-medium);
+  background-color: var(--color--gray-70, #FFFFFF);
+  border: 1px solid var(--color--petroleum-100, #C8CCD3);
+}
+
+.detail-header {
+  padding-bottom: 0;
+}
+
+snk-data-unit {
+  flex: 1;
+  /* Permite encolher abaixo do conteúdo p/ a grade rolar quando o painel
+     inferior é redimensionado abaixo da altura natural. */
+  min-height: 0;
+  gap: var(--space--12, 12px);
+  display: flex;
+  flex-direction: column;
+}
+
+/* view-stack preenche o espaço restante e pode encolher (grade rola dentro). */
+snk-data-unit ez-view-stack {
+  flex: 1;
+  min-height: 0;
+}
+
+snk-grid {
+  height: 100%;
+  --snk-grid-margin: 0px;
+  --snk-grid-box-shadow: none;
+  --snk-grid-min-height: 135px;
+}
+
+.form-and-detail-container > ez-tabselector {
+  flex-shrink: 0;
+}
+
+.form-and-detail-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  padding: var(--space--12, 12px);
+  scrollbar-width: auto;
+  scrollbar-color: var(--color--strokes, #E1E2E5) transparent;
+}
+
+.form-and-detail-container::-webkit-scrollbar {
+  width: var(--space--14, 14px);
+  height: var(--space--14, 14px);
+}
+
+.form-and-detail-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.form-and-detail-container::-webkit-scrollbar-thumb {
+  background-color: var(--color--strokes, #E1E2E5);
+  border-radius: var(--border--radius-100, 100px);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.form-and-detail-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color--petroleum-100, #C8CCD3);
+  background-clip: padding-box;
+}
+
+.form-and-detail-container::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.ez-tabselector-internal {
+  margin: var(--space--8, 8px) 0;
+}
+
+.selected-record-header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space--8, 8px) var(--space--12, 12px);
+  padding: var(--space--12, 12px) var(--space--16, 16px);
+  margin-bottom: var(--space--12, 12px);
+  background: var(--color--gray-80, #F9F9F9);
+  border-radius: var(--border--radius-12, 12px);
+  font-family: var(--font--pattern);
+  border: 1px solid var(--color--petroleum-100, #C8CCD3);
+  border-left: 4px solid var(--color--ocean-green-500, #00B07E);
+}
+
+.selected-record-header--message {
+  border-left-color: var(--color--primary, #007EFF);
+}
+
+.selected-record-header__message {
+  font-size: var(--font-size--default, 14px);
+  font-weight: var(--font-weight--medium, 500);
+  color: var(--color--title-primary, #2B3A54);
+}
+
+.selected-record-header__chip {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space--4, 4px);
+  min-width: 0;
+}
+
+.selected-record-header__label {
+  font-size: var(--font-size--xs, 11px);
+  font-weight: var(--font-weight--medium, 500);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color--text-secondary, #6E7A8A);
+}
+
+.selected-record-header__value {
+  font-size: var(--font-size--md, 15px);
+  font-weight: var(--font-weight--semibold, 600);
+  color: var(--color--ocean-green-1000, #00281D);
+  line-height: 1.2;
+  word-break: break-word;
+}
+
+.selected-record-header__separator {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  background: var(--color--petroleum-100, #C8CCD3);
+  margin: 0 var(--space--4, 4px);
+}