udp-stencil-component-library 26.5.0-beta.2 → 26.5.0-beta.21

package/dist/collection/components/forms/udp-question-form/builder/udp-question-form-builder.css

@@ -0,0 +1,361 @@
+/* The builder claims the viewport region from its own top down to the bottom:
+   a flex column whose height is `100dvh − <its top in the viewport>`. The top is
+   measured once (and on resize) into `--builder-top` — robust across host shells
+   without hardcoding app-chrome constants, since shells here render route
+   content in a flow region rather than passing height down. The header is a
+   fixed top row; the active pane fills the rest and scrolls internally (the
+   structure rail and canvas each scroll on their own via udp-sidebar-layout fill
+   mode). `overflow: hidden` keeps the scroll inside the panes. */
+:host {
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - var(--builder-top, 0px));
+  min-height: 0;
+  overflow: hidden;
+}
+
+:host > udp-primary-action-header {
+  flex: 0 0 auto;
+  background-color: var(--colorNeutralBackground1);
+}
+
+.builder-container {
+  padding-top: var(--spacingVerticalM);
+}
+
+/* === Header inline-edit inputs ===
+   udp-fluent-inline-edit slotted into udp-primary-action-header. They inherit
+   typography from their wrap (subtitle1 for title, caption1 for subtitle) via
+   `font: inherit`, so no font sizing is needed here — only layout sizing.
+
+   flex-shrink: 0 on the title mirrors the rule on `.title-inline udp-text` in the
+   header so the header's overflow-measurement logic still triggers action collapse
+   when the form name pushes the title-inline width past its container. */
+.builder-title-input {
+  flex-shrink: 0;
+  min-width: 240px;
+  max-width: 600px;
+}
+
+.builder-subtitle-input {
+  max-width: 300px;
+  margin-top: var(--spacingVerticalXS);
+}
+
+/* Inline header meta — sits in the inline slot beside the title. Badges are
+   left-aligned (flex-start) so they read as title metadata rather than secondary
+   actions. */
+.builder-header-meta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacingHorizontalS);
+  flex-wrap: nowrap;
+}
+
+/* Actions slot — Version badge + Preview icon button. Sits to the left of the
+   header's system-actions (Versions, Save Form). */
+.builder-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalS);
+  flex-wrap: nowrap;
+}
+
+.builder-error-message {
+  padding: var(--spacingVerticalL) var(--spacingHorizontalL);
+  color: var(--colorPaletteRedForeground1);
+}
+
+/* Centered empty state for "form not found" and similar cold-cache load
+   failures. Sits below the primary-action-header so the user still has
+   a coherent app shell to navigate away from. */
+.builder-empty-state {
+  min-height: 50vh;
+  padding: var(--spacingVerticalXXXL) var(--spacingHorizontalL);
+  text-align: center;
+}
+
+.builder-header {
+  background-color: var(--colorNeutralBackground1);
+  padding: var(--spacingVerticalM) var(--spacingHorizontalL);
+  border-radius: var(--borderRadiusLarge);
+  box-shadow: var(--shadow4);
+}
+
+.form-details-card {
+  margin-bottom: var(--spacingVerticalM);
+}
+
+.section-card {
+  width: 100%;
+}
+
+.section-header {
+  padding: var(--spacingVerticalXS) var(--spacingHorizontalXS);
+}
+
+.section-header-content {
+  min-width: 0;
+  padding-left: var(--spacingHorizontalS);
+}
+.section-title-text {
+  color: inherit;
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.section-title-input {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.section-description-wrapper {
+  padding-left: calc(var(--spacingHorizontalS) + 20px);
+  /* Match width of drag handle + gap */
+  margin-top: calc(var(--spacingVerticalXXS) * -1);
+  /* Pull up slightly closer to title */
+  padding-bottom: var(--spacingVerticalS);
+}
+.section-header-actions {
+  flex-shrink: 0;
+}
+
+.section-description-truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.section-description-truncated udp-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.section-drag-handle {
+  color: inherit;
+  cursor: grab;
+  padding: var(--spacingVerticalXXS);
+  flex-shrink: 0;
+  display: flex;
+    align-items: center;
+}
+
+.questions-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacingVerticalS);
+  padding: var(--spacingVerticalS) 0;
+}
+
+.section-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacingHorizontalS);
+  padding: var(--spacingVerticalS) var(--spacingHorizontalS);
+  border-top: 1px solid var(--colorNeutralStroke2);
+}
+
+.question-item {
+  background-color: var(--colorNeutralBackground2);
+    border: 1px solid transparent;
+  border-radius: var(--borderRadiusMedium);
+  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalM);
+  transition: all 0.2s ease;
+  user-select: none;
+}
+
+.question-item:hover {
+  border-color: var(--colorBrandStroke1);
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.question-item--invalid {
+  border-color: var(--colorPaletteRedBorder1);
+  background-color: var(--colorPaletteRedBackground1);
+}
+
+.question-drag-handle {
+  color: var(--colorNeutralForeground3);
+  cursor: grab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.question-item-avatar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-self: center;
+}
+
+/* SortableJS placeholders */
+.sortable-ghost {
+  opacity: 0.4;
+  border: 2px dashed var(--colorBrandStroke1) !important;
+  background-color: var(--colorBrandBackground2) !important;
+}
+
+.sortable-chosen {
+  background-color: var(--colorNeutralBackground1Hover);
+}
+
+.sortable-drag {
+  opacity: 0.9;
+  box-shadow: var(--shadow16);
+  cursor: grabbing !important;
+}
+
+/* Add Form Question drawer - filter at top of body */
+.add-question-filter-row {
+  padding-bottom: var(--spacingVerticalS);
+  margin-bottom: var(--spacingVerticalS);
+}
+
+.add-question-filter-row udp-fluent-text-input {
+  width: 100%;
+}
+
+.add-question-type-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacingVerticalS) var(--spacingHorizontalM);
+}
+/* Type selection grid in drawer - equal-width columns */
+.type-selection-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacingHorizontalM);
+  padding: var(--spacingVerticalM);
+}
+
+.type-card-wrapper {
+  width: 100%;
+  min-width: 0; /* allow card to respect grid cell width */
+  cursor: pointer;
+}
+
+/* .type-card-wrapper:hover udp-fluent-card { */
+/* border-color: var(--colorNeutralStroke1Hover, var(--colorNeutralStroke1));
+  background-color: var(--colorNeutralBackground1Hover, var(--colorNeutralBackground1)); */
+/* } */
+
+.empty-section-message {
+  text-align: center;
+  padding: var(--spacingVerticalXL);
+  color: var(--colorNeutralForeground3);
+  border: 1px dashed var(--colorNeutralStroke3);
+  border-radius: var(--borderRadiusMedium);
+  background-color: var(--colorNeutralBackground2);
+}
+
+/* Full-width dashed "add" affordance below the sections. */
+.add-section-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacingHorizontalS);
+  width: 100%;
+  padding: var(--spacingVerticalM) var(--spacingHorizontalL);
+  border: 1px dashed var(--colorNeutralStroke2);
+  border-radius: var(--borderRadiusMedium);
+  background-color: transparent;
+  color: var(--colorNeutralForeground2);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightSemibold);
+  line-height: var(--lineHeightBase300);
+  cursor: pointer;
+  transition: background-color 0.1s ease, border-color 0.1s ease, color 0.1s ease;
+}
+
+.add-section-btn:hover {
+  border-color: var(--colorBrandStroke1);
+  background-color: var(--colorSubtleBackgroundHover);
+  color: var(--colorNeutralForeground1);
+}
+
+.add-section-btn:active {
+  background-color: var(--colorSubtleBackgroundPressed);
+}
+
+.add-section-btn:focus-visible {
+  outline: 2px solid var(--colorStrokeFocus2);
+  outline-offset: 1px;
+}
+
+.question-editor-container {
+  padding: var(--spacingVerticalM) 0;
+  min-height: 0;
+}
+
+.edit-drawer-footer {
+  display: flex;
+  gap: var(--spacingHorizontalM);
+  justify-content: flex-end;
+}
+
+/* === Build / Preview tabs ===
+   A small segmented Build/Preview toggle lives in the header's `actions` slot,
+   beside the Save / Versions buttons. Each view is full width; the inactive pane
+   is `display: none` (kept in the DOM for Build so sortable/drawer refs survive a
+   tab switch; Preview's renderer mounts on demand). Both panes flow in the page
+   scroll context — no separate scroll container. */
+
+/* Keep the segmented toggle from being squeezed by the header's flex layout. */
+.builder-view-tabs {
+  flex-shrink: 0;
+}
+
+/* The region below the header fills the remaining height; the sidebar layout
+   inside it owns the two-column (rail + content) scroll. The active pane lives
+   in the layout's scrolling main slot. */
+.builder-body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.preview-pane {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--colorNeutralBackground2);
+  min-width: 0;
+}
+
+.preview-pane-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacingHorizontalS);
+  padding: var(--spacingVerticalS) var(--spacingHorizontalM);
+  border-bottom: 1px solid var(--colorNeutralStroke2);
+  background-color: var(--colorNeutralBackground1);
+}
+
+.preview-pane-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.pane--hidden {
+  display: none;
+}
+
+/* The two-column shell (Form Structure rail + active view) is
+   `<udp-sidebar-layout fill>`, which fills the body and scrolls each column on
+   its own. The rail stays mounted across Build / Preview; the active pane swaps
+   inside the layout's main slot. */
+.builder-body > udp-sidebar-layout {
+  height: 100%;
+}
+