acinguiux-ds-react-framework 0.1.8 → 0.1.11

package/build/esm/components/DeprecatedDatePicker/DatePicker.styles.js

@@ -1,704 +0,0 @@
-import { css as l, styled as $ } from "styled-components";
-import { Sizes as i, ZIndexes as p } from "../../react-base/src/consts/index.js";
-import { Variables as e } from "../../react-base/src/theme/types/layer.js";
-import * as h from "../../react-base/src/components/DatePicker/DatePicker.consts.js";
-import { arrow as m } from "../../react-base/src/components/DatePicker/DatePicker.consts.js";
-import { getFocusStyles as s } from "../../react-base/src/utils/stylesUtils.js";
-import { getLabelTypographySize as v } from "../../react-base/src/utils/sizesUtils.js";
-import { consts as u } from "../../react-base/src/components/Input/Input.consts.js";
-import { WrapperStyles as w } from "../../react-base/src/components/Input/Input.styles.js";
-import { FabricsVariables as b } from "acinguiux-ds-fabrics";
-import { buttonCssWithVariant as y } from "../Button/Button.styles.js";
-import { ARROW_KEYPAD_CLASS as k } from "../../react-base/src/consts/classes.js";
-const { consts: d } = h, x = l`
-  ${({ $prefixCls: n, $elevation: o, $size: r, theme: t }) => {
-  const a = t.layer({ foundation: "raised" }), { width: g, height: c } = m[r];
-  return l`
-      div .${n}-dropdown {
-        z-index: ${p.DATE_PICKER};
-      }
-
-      .${n}-dropdown {
-        &:focus-visible {
-          border-radius: 4px;
-          ${s(t)};
-        }
-
-        ${o && l`
-          position: absolute;
-        `}
-
-        display: flex;
-        justify-content: center;
-        z-index: ${p.ELEVATED};
-        border-radius: 8px;
-        ${o && l`
-          filter: ${t.dropShadows.low3};
-        `}
-
-        &-hidden {
-          display: none;
-        }
-
-        .${n}-range-arrow {
-          display: none;
-        }
-
-        .${n}-panel-container {
-          position: relative;
-          border-radius: 8px;
-          background: ${o ? a[e.BackgroundFoundation] : "transparent"};
-
-          &::before {
-            content: '';
-            position: absolute;
-            display: ${o ? "block" : "none"};
-            background: ${o ? a[e.BackgroundFoundation] : "transparent"};
-            mask: url('data:image/svg+xml;utf8,<svg width="${g}" height="${c}" viewBox="0 0 20 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H20L18.8147 0.000198954C17.6615 0.000392518 16.5644 0.498297 15.805 1.36618L11.5052 6.28033C10.7083 7.19098 9.29167 7.19098 8.49485 6.28033L4.19497 1.36618C3.43557 0.498295 2.33855 0.000392518 1.18533 0.000198954L0 0Z" fill="white" /></svg>');
-            width: ${g}px;
-            height: ${c}px;
-            left: calc(50% - ${g / 2}px);
-            transform-origin: center;
-            background-repeat: no-repeat;
-            background-size: contain;
-          }
-        }
-
-        &-placement-topLeft,
-        &-placement-topRight {
-          .${n}-panel-container::before {
-            bottom: -${c - 1}px;
-            transform: rotate(0deg);
-          }
-        }
-
-        &-placement-bottomLeft,
-        &-placement-bottomRight {
-          .${n}-panel-container::before {
-            top: -${c - 1}px;
-            transform: rotate(180deg);
-          }
-        }
-      }
-    `;
-}}
-`, B = l`
-  ${({ $prefixCls: n, theme: o, $size: r }) => {
-  const t = { foundation: "section" }, a = o.layer(t), g = o.layer({ ...t, selectedProminence: "subtle" }), c = o.layer({ ...t, disabled: !0 });
-  return l`
-      &-cell {
-        color: ${a[e.TextOnFoundationSubtle]};
-
-        &:not(.${n}-cell-in-range):first-of-type
-          .${n}-cell-inner,
-          &-start
-          .${n}-cell-inner,
-          &-disabled
-          + .${n}-cell-in-view:not(.${n}-cell-disabled)
-          .${n}-cell-inner,
-          &-in-view:not(&-in-range)
-          + :not(.${n}-cell-in-view, .${n}-cell-disabled, .${n}-cell-in-range)
-          .${n}-cell-inner,
-          :not(&-in-view)
-          + .${n}-cell-in-view:not(.${n}-cell-disabled, .${n}-cell-in-range)
-          .${n}-cell-inner {
-          border-top-left-radius: 8px;
-          border-bottom-left-radius: 8px;
-        }
-
-        &:not(.${n}-cell-in-range):last-of-type
-          .${n}-cell-inner,
-          &-end
-          .${n}-cell-inner,
-          :not(&-in-view):has(+ .${n}-cell-in-view:not(.${n}-cell-disabled)):not(
-            .${n}-cell-in-range
-          )
-          .${n}-cell-inner,
-          &-disabled:has(+ .${n}-cell-in-view:not(.${n}-cell-disabled)):not(
-            .${n}-cell-in-range
-          )
-          .${n}-cell-inner {
-          border-top-right-radius: 8px;
-          border-bottom-right-radius: 8px;
-        }
-
-        &-inner {
-          ${o.typography("label", v(r))};
-
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          min-width: ${d[r].boxSize}px;
-          min-height: ${d[r].boxSize}px;
-          padding: 0;
-          margin: 0;
-          box-sizing: border-box;
-          background-color: ${a[e.BackgroundFoundation]};
-          color: ${a[e.TextOnFoundationStrong]};
-          cursor: pointer;
-          outline: none;
-          transition:
-            background-color 0.3s,
-            border 0.3s;
-        }
-
-        &-in-view:not(.${n}-cell-disabled) .${n}-cell-inner {
-          border-radius: 8px;
-          color: ${a[e.TextOnFoundationStrong]};
-          background-color: transparent;
-
-          &:hover {
-            background-color: ${o.layer({ ...t, state: b.States.Hover })[e.BackgroundFoundation]};
-          }
-
-          &:active {
-            background-color: ${o.layer({ ...t, state: b.States.Press })[e.BackgroundFoundation]};
-          }
-        }
-
-        &-in-view {
-          &.${n}-cell-selected .${n}-cell-inner {
-            background-color: ${a[e.BackgroundSelected]};
-            color: ${a[e.TextOnSelectedBackgroundStrong]};
-
-            &:hover {
-              background-color: ${o.layer({ ...t, state: b.States.Hover })[e.BackgroundSelected]};
-            }
-
-            &:active {
-              background-color: ${o.layer({ ...t, state: b.States.Press })[e.BackgroundSelected]};
-            }
-          }
-
-          &.${n}-cell-in-range-selected .${n}-cell-inner {
-            background: ${a[e.BackgroundSelected]};
-            color: ${a[e.TextOnSelectedBackgroundStrong]};
-          }
-
-          &.${n}-cell-in-range .${n}-cell-inner {
-            border-radius: unset;
-            background: ${g[e.BackgroundSelected]};
-          }
-
-          &.${n}-cell-range-hover-start, &.${n}-cell-range-hover-end {
-            .${n}-cell-inner {
-              background: ${a[e.BackgroundSelected]};
-              color: ${a[e.TextOnSelectedBackgroundStrong]};
-            }
-          }
-
-          &.${n}-cell-range-hover {
-            position: relative;
-
-            .${n}-cell-inner {
-              background: ${g[e.BackgroundSelected]};
-            }
-          }
-
-          &.${n}-cell-range-start
-            > .${n}-cell-inner,
-            &.${n}-cell-range-end
-            > .${n}-cell-inner {
-            background: ${a[e.BackgroundSelected]};
-            color: ${a[e.TextOnSelectedBackgroundStrong]};
-          }
-        }
-
-        &-range-start:not(&-range-start-single)
-          .${n}-cell-inner,
-          &-range-hover-start
-          .${n}-cell-inner {
-          border-top-right-radius: unset;
-          border-bottom-right-radius: unset;
-
-          &::after {
-            background: ${a[e.TextOnSelectedBackgroundStrong]};
-            border: 1px solid ${a[e.TextOnSelectedBackgroundStrong]};
-          }
-        }
-
-        &-range-end:not(&-range-start-single)
-          .${n}-cell-inner,
-          &-range-hover-end:not(&-range-start-single)
-          .${n}-cell-inner {
-          border-top-left-radius: unset;
-          border-bottom-left-radius: unset;
-
-          &::after {
-            background: ${a[e.TextOnSelectedBackgroundStrong]};
-            border: 1px solid ${a[e.TextOnSelectedBackgroundStrong]};
-          }
-        }
-
-        &-range-hover .${n}-cell-inner {
-          border-radius: unset;
-        }
-
-        &-today .${n}-cell-inner {
-          position: relative;
-
-          &::after {
-            content: '';
-            position: absolute;
-            bottom: 4px;
-            display: block;
-            height: 3px;
-            width: 20px;
-            border: 1px solid ${c[e.TextOnFoundationSubtle]};
-            border-radius: 2px;
-            background-color: ${c[e.TextOnFoundationSubtle]};
-          }
-        }
-
-        &-in-view.${n}-cell-today .${n}-cell-inner {
-          &::after {
-            border-color: ${a[e.BackgroundSelected]};
-            background-color: ${a[e.BackgroundSelected]};
-          }
-        }
-
-        &-selected.${n}-cell-today .${n}-cell-inner {
-          &::after {
-            border-color: ${a[e.TextOnSelectedBackgroundStrong]};
-            background-color: ${a[e.TextOnSelectedBackgroundStrong]};
-          }
-        }
-
-        &-in-view.${n}-cell-in-range.${n}-cell-today .${n}-cell-inner {
-          &::after {
-            border-color: ${a[e.TextOnFoundationStrong]};
-            background-color: ${a[e.TextOnFoundationStrong]};
-          }
-        }
-
-        &-disabled.${n}-cell-today .${n}-cell-inner {
-          &::after {
-            border-color: ${c[e.TextOnFoundationSubtle]};
-            background-color: ${c[e.TextOnFoundationStrong]};
-          }
-        }
-
-        &-disabled .${n}-cell-inner {
-          background-color: ${c[e.BackgroundFoundation]};
-          color: ${c[e.TextOnFoundationSubtle]};
-          cursor: not-allowed;
-          text-decoration: line-through;
-        }
-      }
-    `;
-}}
-`, T = l`
-  ${({ theme: n, $size: o }) => {
-  const r = n.layer({ foundation: "surface" });
-  return l`
-      &-header {
-        display: flex;
-
-        &-view {
-          flex: auto;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-
-          > button {
-            ${(o === i.Small || o === i.XSmall) && n.typography("heading", "extraSmall")};
-            ${o === i.Medium && n.typography("heading", "small")};
-            ${o === i.Large && n.typography("heading", "medium")};
-
-            color: ${r[e.TextOnFoundationStrong]};
-            border: 0;
-            padding: 0;
-            background: none;
-
-            &:not(:last-child) {
-              margin-right: 8px;
-            }
-
-            &:hover {
-              cursor: pointer;
-              color: ${r[e.BackgroundSelected]};
-            }
-          }
-        }
-
-        &-next-btn,
-        &-prev-btn,
-        &-super-next-btn,
-        &-super-prev-btn {
-          padding: 8px 4px;
-          border: 0;
-          margin: 0;
-          background: none;
-          cursor: pointer;
-
-          > svg {
-            display: block;
-            fill: ${r[e.TextOnFoundationStrong]};
-
-            &:hover {
-              fill: ${r[e.BackgroundSelected]};
-            }
-          }
-        }
-
-        &-super-next-btn,
-        &-super-prev-btn {
-          display: none;
-        }
-      }
-    `;
-}}
-`, F = l(
-  ({ $size: n }) => l`
-    &-footer {
-      display: flex;
-      justify-content: flex-start;
-      margin: 0 ${d[n].panelPadding}px ${d[n].panelGap}px;
-
-      &-extra {
-        order: 2;
-      }
-    }
-
-    &-today-btn,
-    &-ok button {
-      ${y()};
-    }
-
-    &-now a {
-      ${y("outlined")};
-    }
-
-    &-ranges {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      list-style: none;
-      gap: 12px;
-
-      > li {
-        display: inline-block;
-      }
-    }
-  `
-), S = l`
-  ${({ $prefixCls: n, $size: o, $elevation: r, theme: t }) => l`
-    &-panel {
-      background-color: ${r ? t.layer({ foundation: "raised" })[e.BackgroundFoundation] : "transparent"};
-      display: inline-block;
-      vertical-align: top;
-      margin: ${r ? `${d[o].panelGap}px
-        ${d[o].panelPadding}px
-        ${d[o].panelPadding}px` : `${d[o].panelGap}px 0 0`};
-
-      &:not(.${n}-panel-focused) .${k} {
-        display: none;
-      }
-
-      &:focus-visible {
-        ${s(t)};
-      }
-
-      &-focused {
-        .${k} {
-          display: flex;
-        }
-
-        .acinguiux-date-picker-content tbody {
-          border-radius: 4px;
-          ${s(t)};
-        }
-      }
-
-      &-rtl {
-        direction: rtl;
-      }
-    }
-
-    &-panels {
-      display: flex;
-      gap: ${r ? "0" : `${d[o].panelPadding}px`};
-    }
-
-    &-decade-panel,
-    &-year-panel,
-    &-month-panel,
-    &-week-panel,
-    &-date-panel,
-    &-time-panel {
-      display: flex;
-      flex-direction: column;
-
-      .${n}-content {
-        background-color: ${r ? t.layer({ foundation: "raised" })[e.BackgroundFoundation] : "transparent"};
-      }
-
-      table {
-        text-align: center;
-        border-collapse: collapse;
-        border-spacing: 0;
-
-        td {
-          padding: 0;
-          margin: 0;
-        }
-      }
-
-      tr:not(:last-child) td {
-        padding-bottom: 4px;
-      }
-
-      thead th {
-        ${(o === i.XSmall || o === i.Small) && t.typography("label", "small")};
-        ${(o === i.Large || o === i.Medium) && t.typography("label", "medium")};
-
-        color: ${t.layer({ foundation: "surface" })[e.TextOnFoundationSubtle]};
-        height: ${d[o].boxSize}px;
-      }
-    }
-
-    &-year-panel,
-    &-month-panel,
-    &-decade-panel {
-      .${n}-header-super-prev-btn, .${n}-header-super-next-btn {
-        display: block;
-      }
-
-      .${n}-header {
-        margin-bottom: ${d[o].panelGap}px;
-      }
-
-      .${n}-cell-inner {
-        width: ${d[o].cellWidth}px;
-      }
-    }
-
-    &-week-panel {
-      &-row {
-        &:hover {
-          .${n}-cell {
-            background: ${t.layer({ selectedProminence: "subtle" })[e.BackgroundSelected]};
-            &.${n}-cell-in-view .${n}-cell-inner, & .${n}-cell-inner {
-              color: ${t.layer({ selectedProminence: "subtle" })[e.TextOnSelectedBackgroundStrong]};
-            }
-          }
-        }
-
-        &-selected {
-          .${n}-cell {
-            background: ${t.layer({ selectedProminence: "strong" })[e.BackgroundSelected]};
-            &.${n}-cell-in-view .${n}-cell-inner, & .${n}-cell-inner {
-              color: ${t.layer({ selectedProminence: "strong" })[e.TextOnSelectedBackgroundStrong]};
-            }
-          }
-        }
-      }
-
-      .${n}-cell-week {
-        width: 20px;
-        font-size: 12px;
-        color: ${t.layer({ selectedProminence: "strong" })[e.TextOnSelectedBackgroundStrong]};
-        font-weight: bold;
-      }
-
-      .${n}-cell:hover > .${n}-cell-inner, .${n}-cell-selected > .${n}-cell-inner {
-        background: transparent;
-      }
-    }
-
-    &-time-panel {
-      width: auto;
-
-      .${n}-header {
-        height: 32px;
-        margin-bottom: 12px;
-      }
-
-      .${n}-content {
-        display: flex;
-        max-height: 240px;
-        position: relative;
-
-        &::before {
-          content: '';
-          position: absolute;
-          display: block;
-          top: 0;
-          left: 0;
-          right: 0;
-          border-radius: 8px;
-          background-color: ${t.layer({ foundation: "section" })[e.BackgroundFoundation]};
-          height: 36px;
-        }
-      }
-
-      &-column {
-        flex: none;
-        text-align: left;
-        position: relative;
-        list-style: none;
-        margin: 0;
-        padding: 0 0 180px;
-        overflow: hidden hidden;
-        justify-items: center;
-        width: 54px;
-        transition: background-color 0.3s;
-        font-size: 12px;
-
-        &-active {
-          background: rgb(0 0 255 / 10%);
-        }
-
-        &:hover {
-          overflow-y: auto;
-        }
-
-        > li {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 36px;
-          height: 36px;
-          border-radius: 8px;
-          padding: 0;
-          margin: 0;
-          cursor: pointer;
-          color: ${t.layer({ foundation: "surface" })[e.TextOnFoundationSubtle]};
-
-          .${n}-time-panel-cell-inner {
-            width: 100%;
-            height: 20px;
-            margin: 0;
-            color: ${t.layer({ foundation: "surface" })[e.TextOnFoundationSubtle]};
-            line-height: 20px;
-            text-align: center;
-
-            .${n}-panel-rtl & {
-              padding: 0 12px 0 0;
-              text-align: right;
-            }
-          }
-
-          &:hover {
-            background-color: ${t.layer({ foundation: "section", state: b.States.Hover })[e.BackgroundFoundation]};
-          }
-        }
-      }
-    }
-
-    &-datetime-panel {
-      display: flex;
-
-      .${n}-time-panel {
-        margin-left: 20px;
-      }
-
-      .${n}-date-panel, .${n}-time-panel {
-        transition: opacity 0.3s;
-      }
-
-      &-active {
-        .${n}-date-panel, .${n}-time-panel {
-          opacity: 0.3;
-
-          &-active {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    ${T}
-    ${B}
-    ${F}
-  `}
-`, A = $.div`
-  ${({ $prefixCls: n, $size: o, theme: r }) => l`
-    ${w};
-
-    &:has(> .${n}-range) {
-      background-color: ${r.layer({ foundation: "surface" })[e.BackgroundFoundation]};
-    }
-
-    &:focus-visible {
-      outline: none;
-    }
-
-    .${n} {
-      display: flex;
-      align-items: center;
-      justify-content: stretch;
-      width: 100%;
-
-      &-rtl {
-        direction: rtl;
-      }
-
-      ${S}
-
-      &-input {
-        display: flex;
-        width: 100%;
-      }
-
-      &-suffix {
-        ${o === i.XSmall && l`
-          margin-block: 1px;
-        `};
-      }
-
-      &-clear {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-
-        button {
-          right: ${u[o].containerGap * 2 + u[o].iconSize + u[o].padding.inline * 2}px;
-        }
-      }
-
-      &-range {
-        display: flex;
-        position: relative;
-        gap: ${u[o].containerGap}px;
-
-        input {
-          border-radius: ${u[o].affixBorderRadius}px;
-        }
-
-        input:hover,
-        input:active,
-        input:focus-visible {
-          background-color: ${r.layer({ selectedProminence: "subtle" })[e.BackgroundSelected]};
-        }
-
-        .${n}-clear div {
-          top: 0;
-        }
-
-        &-separator {
-          display: flex;
-          align-items: center;
-          fill: inherit;
-        }
-      }
-    }
-
-    ${x}
-  `}
-`, V = $.div`
-  ${({ $prefixCls: n }) => l`
-    .${n} {
-      ${S};
-    }
-  `}
-`;
-export {
-  V as CalendarWrapper,
-  A as DatePickerWrapper
-};
-//# sourceMappingURL=DatePicker.styles.js.map