acinguiux-ds-react-framework 0.1.24 → 0.1.25

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

@@ -0,0 +1,677 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("styled-components"),d=require("../../react-base/src/consts/index.js"),n=require("../../react-base/src/theme/types/layer.js"),k=require("../../react-base/src/components/DatePicker/DatePicker.consts.js"),b=require("../../react-base/src/utils/stylesUtils.js"),$=require("../../react-base/src/utils/sizesUtils.js"),u=require("../../react-base/src/components/Input/Input.consts.js"),h=require("../../react-base/src/components/Input/Input.styles.js"),g=require("acinguiux-ds-fabrics"),p=require("../Button/Button.styles.js"),y=require("../../react-base/src/consts/classes.js"),{consts:i}=k,v=l.css`
+  ${({$prefixCls:e,$elevation:a,$size:r,theme:o})=>{const t=o.layer({foundation:"raised"}),{width:s,height:c}=k.arrow[r];return l.css`
+      div .${e}-dropdown {
+        z-index: ${d.ZIndexes.DATE_PICKER};
+      }
+
+      .${e}-dropdown {
+        &:focus-visible {
+          border-radius: 4px;
+          ${b.getFocusStyles(o)};
+        }
+
+        ${a&&l.css`
+          position: absolute;
+        `}
+
+        display: flex;
+        justify-content: center;
+        z-index: ${d.ZIndexes.ELEVATED};
+        border-radius: 8px;
+        ${a&&l.css`
+          filter: ${o.dropShadows.low3};
+        `}
+
+        &-hidden {
+          display: none;
+        }
+
+        .${e}-range-arrow {
+          display: none;
+        }
+
+        .${e}-panel-container {
+          position: relative;
+          border-radius: 8px;
+          background: ${a?t[n.Variables.BackgroundFoundation]:"transparent"};
+
+          &::before {
+            content: '';
+            position: absolute;
+            display: ${a?"block":"none"};
+            background: ${a?t[n.Variables.BackgroundFoundation]:"transparent"};
+            mask: url('data:image/svg+xml;utf8,<svg width="${s}" 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: ${s}px;
+            height: ${c}px;
+            left: calc(50% - ${s/2}px);
+            transform-origin: center;
+            background-repeat: no-repeat;
+            background-size: contain;
+          }
+        }
+
+        &-placement-topLeft,
+        &-placement-topRight {
+          .${e}-panel-container::before {
+            bottom: -${c-1}px;
+            transform: rotate(0deg);
+          }
+        }
+
+        &-placement-bottomLeft,
+        &-placement-bottomRight {
+          .${e}-panel-container::before {
+            top: -${c-1}px;
+            transform: rotate(180deg);
+          }
+        }
+      }
+    `}}
+`,V=l.css`
+  ${({$prefixCls:e,theme:a,$size:r})=>{const o={foundation:"section"},t=a.layer(o),s=a.layer({...o,selectedProminence:"subtle"}),c=a.layer({...o,disabled:!0});return l.css`
+      &-cell {
+        color: ${t[n.Variables.TextOnFoundationSubtle]};
+
+        &:not(.${e}-cell-in-range):first-of-type
+          .${e}-cell-inner,
+          &-start
+          .${e}-cell-inner,
+          &-disabled
+          + .${e}-cell-in-view:not(.${e}-cell-disabled)
+          .${e}-cell-inner,
+          &-in-view:not(&-in-range)
+          + :not(.${e}-cell-in-view, .${e}-cell-disabled, .${e}-cell-in-range)
+          .${e}-cell-inner,
+          :not(&-in-view)
+          + .${e}-cell-in-view:not(.${e}-cell-disabled, .${e}-cell-in-range)
+          .${e}-cell-inner {
+          border-top-left-radius: 8px;
+          border-bottom-left-radius: 8px;
+        }
+
+        &:not(.${e}-cell-in-range):last-of-type
+          .${e}-cell-inner,
+          &-end
+          .${e}-cell-inner,
+          :not(&-in-view):has(+ .${e}-cell-in-view:not(.${e}-cell-disabled)):not(
+            .${e}-cell-in-range
+          )
+          .${e}-cell-inner,
+          &-disabled:has(+ .${e}-cell-in-view:not(.${e}-cell-disabled)):not(
+            .${e}-cell-in-range
+          )
+          .${e}-cell-inner {
+          border-top-right-radius: 8px;
+          border-bottom-right-radius: 8px;
+        }
+
+        &-inner {
+          ${a.typography("label",$.getLabelTypographySize(r))};
+
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: ${i[r].boxSize}px;
+          min-height: ${i[r].boxSize}px;
+          padding: 0;
+          margin: 0;
+          box-sizing: border-box;
+          background-color: ${t[n.Variables.BackgroundFoundation]};
+          color: ${t[n.Variables.TextOnFoundationStrong]};
+          cursor: pointer;
+          outline: none;
+          transition:
+            background-color 0.3s,
+            border 0.3s;
+        }
+
+        &-in-view:not(.${e}-cell-disabled) .${e}-cell-inner {
+          border-radius: 8px;
+          color: ${t[n.Variables.TextOnFoundationStrong]};
+          background-color: transparent;
+
+          &:hover {
+            background-color: ${a.layer({...o,state:g.FabricsVariables.States.Hover})[n.Variables.BackgroundFoundation]};
+          }
+
+          &:active {
+            background-color: ${a.layer({...o,state:g.FabricsVariables.States.Press})[n.Variables.BackgroundFoundation]};
+          }
+        }
+
+        &-in-view {
+          &.${e}-cell-selected .${e}-cell-inner {
+            background-color: ${t[n.Variables.BackgroundSelected]};
+            color: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+
+            &:hover {
+              background-color: ${a.layer({...o,state:g.FabricsVariables.States.Hover})[n.Variables.BackgroundSelected]};
+            }
+
+            &:active {
+              background-color: ${a.layer({...o,state:g.FabricsVariables.States.Press})[n.Variables.BackgroundSelected]};
+            }
+          }
+
+          &.${e}-cell-in-range-selected .${e}-cell-inner {
+            background: ${t[n.Variables.BackgroundSelected]};
+            color: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+          }
+
+          &.${e}-cell-in-range .${e}-cell-inner {
+            border-radius: unset;
+            background: ${s[n.Variables.BackgroundSelected]};
+          }
+
+          &.${e}-cell-range-hover-start, &.${e}-cell-range-hover-end {
+            .${e}-cell-inner {
+              background: ${t[n.Variables.BackgroundSelected]};
+              color: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+            }
+          }
+
+          &.${e}-cell-range-hover {
+            position: relative;
+
+            .${e}-cell-inner {
+              background: ${s[n.Variables.BackgroundSelected]};
+            }
+          }
+
+          &.${e}-cell-range-start
+            > .${e}-cell-inner,
+            &.${e}-cell-range-end
+            > .${e}-cell-inner {
+            background: ${t[n.Variables.BackgroundSelected]};
+            color: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+          }
+        }
+
+        &-range-start:not(&-range-start-single)
+          .${e}-cell-inner,
+          &-range-hover-start
+          .${e}-cell-inner {
+          border-top-right-radius: unset;
+          border-bottom-right-radius: unset;
+
+          &::after {
+            background: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+            border: 1px solid ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+          }
+        }
+
+        &-range-end:not(&-range-start-single)
+          .${e}-cell-inner,
+          &-range-hover-end:not(&-range-start-single)
+          .${e}-cell-inner {
+          border-top-left-radius: unset;
+          border-bottom-left-radius: unset;
+
+          &::after {
+            background: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+            border: 1px solid ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+          }
+        }
+
+        &-range-hover .${e}-cell-inner {
+          border-radius: unset;
+        }
+
+        &-today .${e}-cell-inner {
+          position: relative;
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 4px;
+            display: block;
+            height: 3px;
+            width: 20px;
+            border: 1px solid ${c[n.Variables.TextOnFoundationSubtle]};
+            border-radius: 2px;
+            background-color: ${c[n.Variables.TextOnFoundationSubtle]};
+          }
+        }
+
+        &-in-view.${e}-cell-today .${e}-cell-inner {
+          &::after {
+            border-color: ${t[n.Variables.BackgroundSelected]};
+            background-color: ${t[n.Variables.BackgroundSelected]};
+          }
+        }
+
+        &-selected.${e}-cell-today .${e}-cell-inner {
+          &::after {
+            border-color: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+            background-color: ${t[n.Variables.TextOnSelectedBackgroundStrong]};
+          }
+        }
+
+        &-in-view.${e}-cell-in-range.${e}-cell-today .${e}-cell-inner {
+          &::after {
+            border-color: ${t[n.Variables.TextOnFoundationStrong]};
+            background-color: ${t[n.Variables.TextOnFoundationStrong]};
+          }
+        }
+
+        &-disabled.${e}-cell-today .${e}-cell-inner {
+          &::after {
+            border-color: ${c[n.Variables.TextOnFoundationSubtle]};
+            background-color: ${c[n.Variables.TextOnFoundationStrong]};
+          }
+        }
+
+        &-disabled .${e}-cell-inner {
+          background-color: ${c[n.Variables.BackgroundFoundation]};
+          color: ${c[n.Variables.TextOnFoundationSubtle]};
+          cursor: not-allowed;
+          text-decoration: line-through;
+        }
+      }
+    `}}
+`,m=l.css`
+  ${({theme:e,$size:a})=>{const r=e.layer({foundation:"surface"});return l.css`
+      &-header {
+        display: flex;
+
+        &-view {
+          flex: auto;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          > button {
+            ${(a===d.Sizes.Small||a===d.Sizes.XSmall)&&e.typography("heading","extraSmall")};
+            ${a===d.Sizes.Medium&&e.typography("heading","small")};
+            ${a===d.Sizes.Large&&e.typography("heading","medium")};
+
+            color: ${r[n.Variables.TextOnFoundationStrong]};
+            border: 0;
+            padding: 0;
+            background: none;
+
+            &:not(:last-child) {
+              margin-right: 8px;
+            }
+
+            &:hover {
+              cursor: pointer;
+              color: ${r[n.Variables.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[n.Variables.TextOnFoundationStrong]};
+
+            &:hover {
+              fill: ${r[n.Variables.BackgroundSelected]};
+            }
+          }
+        }
+
+        &-super-next-btn,
+        &-super-prev-btn {
+          display: none;
+        }
+      }
+    `}}
+`,w=l.css(({$size:e})=>l.css`
+    &-footer {
+      display: flex;
+      justify-content: flex-start;
+      margin: 0 ${i[e].panelPadding}px ${i[e].panelGap}px;
+
+      &-extra {
+        order: 2;
+      }
+    }
+
+    &-today-btn,
+    &-ok button {
+      ${p.buttonCssWithVariant()};
+    }
+
+    &-now a {
+      ${p.buttonCssWithVariant("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.css`
+  ${({$prefixCls:e,$size:a,$elevation:r,theme:o})=>l.css`
+    &-panel {
+      background-color: ${r?o.layer({foundation:"raised"})[n.Variables.BackgroundFoundation]:"transparent"};
+      display: inline-block;
+      vertical-align: top;
+      margin: ${r?`${i[a].panelGap}px
+        ${i[a].panelPadding}px
+        ${i[a].panelPadding}px`:`${i[a].panelGap}px 0 0`};
+
+      &:not(.${e}-panel-focused) .${y.ARROW_KEYPAD_CLASS} {
+        display: none;
+      }
+
+      &:focus-visible {
+        ${b.getFocusStyles(o)};
+      }
+
+      &-focused {
+        .${y.ARROW_KEYPAD_CLASS} {
+          display: flex;
+        }
+
+        .acinguiux-date-picker-content tbody {
+          border-radius: 4px;
+          ${b.getFocusStyles(o)};
+        }
+      }
+
+      &-rtl {
+        direction: rtl;
+      }
+    }
+
+    &-panels {
+      display: flex;
+      gap: ${r?"0":`${i[a].panelPadding}px`};
+    }
+
+    &-decade-panel,
+    &-year-panel,
+    &-month-panel,
+    &-week-panel,
+    &-date-panel,
+    &-time-panel {
+      display: flex;
+      flex-direction: column;
+
+      .${e}-content {
+        background-color: ${r?o.layer({foundation:"raised"})[n.Variables.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 {
+        ${(a===d.Sizes.XSmall||a===d.Sizes.Small)&&o.typography("label","small")};
+        ${(a===d.Sizes.Large||a===d.Sizes.Medium)&&o.typography("label","medium")};
+
+        color: ${o.layer({foundation:"surface"})[n.Variables.TextOnFoundationSubtle]};
+        height: ${i[a].boxSize}px;
+      }
+    }
+
+    &-year-panel,
+    &-month-panel,
+    &-decade-panel {
+      .${e}-header-super-prev-btn, .${e}-header-super-next-btn {
+        display: block;
+      }
+
+      .${e}-header {
+        margin-bottom: ${i[a].panelGap}px;
+      }
+
+      .${e}-cell-inner {
+        width: ${i[a].cellWidth}px;
+      }
+    }
+
+    &-week-panel {
+      &-row {
+        &:hover {
+          .${e}-cell {
+            background: ${o.layer({selectedProminence:"subtle"})[n.Variables.BackgroundSelected]};
+            &.${e}-cell-in-view .${e}-cell-inner, & .${e}-cell-inner {
+              color: ${o.layer({selectedProminence:"subtle"})[n.Variables.TextOnSelectedBackgroundStrong]};
+            }
+          }
+        }
+
+        &-selected {
+          .${e}-cell {
+            background: ${o.layer({selectedProminence:"strong"})[n.Variables.BackgroundSelected]};
+            &.${e}-cell-in-view .${e}-cell-inner, & .${e}-cell-inner {
+              color: ${o.layer({selectedProminence:"strong"})[n.Variables.TextOnSelectedBackgroundStrong]};
+            }
+          }
+        }
+      }
+
+      .${e}-cell-week {
+        width: 20px;
+        font-size: 12px;
+        color: ${o.layer({selectedProminence:"strong"})[n.Variables.TextOnSelectedBackgroundStrong]};
+        font-weight: bold;
+      }
+
+      .${e}-cell:hover > .${e}-cell-inner, .${e}-cell-selected > .${e}-cell-inner {
+        background: transparent;
+      }
+    }
+
+    &-time-panel {
+      width: auto;
+
+      .${e}-header {
+        height: 32px;
+        margin-bottom: 12px;
+      }
+
+      .${e}-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: ${o.layer({foundation:"section"})[n.Variables.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: ${o.layer({foundation:"surface"})[n.Variables.TextOnFoundationSubtle]};
+
+          .${e}-time-panel-cell-inner {
+            width: 100%;
+            height: 20px;
+            margin: 0;
+            color: ${o.layer({foundation:"surface"})[n.Variables.TextOnFoundationSubtle]};
+            line-height: 20px;
+            text-align: center;
+
+            .${e}-panel-rtl & {
+              padding: 0 12px 0 0;
+              text-align: right;
+            }
+          }
+
+          &:hover {
+            background-color: ${o.layer({foundation:"section",state:g.FabricsVariables.States.Hover})[n.Variables.BackgroundFoundation]};
+          }
+        }
+      }
+    }
+
+    &-datetime-panel {
+      display: flex;
+
+      .${e}-time-panel {
+        margin-left: 20px;
+      }
+
+      .${e}-date-panel, .${e}-time-panel {
+        transition: opacity 0.3s;
+      }
+
+      &-active {
+        .${e}-date-panel, .${e}-time-panel {
+          opacity: 0.3;
+
+          &-active {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    ${m}
+    ${V}
+    ${w}
+  `}
+`,x=l.styled.div`
+  ${({$prefixCls:e,$size:a,theme:r})=>l.css`
+    ${h.WrapperStyles};
+
+    &:has(> .${e}-range) {
+      background-color: ${r.layer({foundation:"surface"})[n.Variables.BackgroundFoundation]};
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    .${e} {
+      display: flex;
+      align-items: center;
+      justify-content: stretch;
+      width: 100%;
+
+      &-rtl {
+        direction: rtl;
+      }
+
+      ${S}
+
+      &-input {
+        display: flex;
+        width: 100%;
+      }
+
+      &-suffix {
+        ${a===d.Sizes.XSmall&&l.css`
+          margin-block: 1px;
+        `};
+      }
+
+      &-clear {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+
+        button {
+          right: ${u.consts[a].containerGap*2+u.consts[a].iconSize+u.consts[a].padding.inline*2}px;
+        }
+      }
+
+      &-range {
+        display: flex;
+        position: relative;
+        gap: ${u.consts[a].containerGap}px;
+
+        input {
+          border-radius: ${u.consts[a].affixBorderRadius}px;
+        }
+
+        input:hover,
+        input:active,
+        input:focus-visible {
+          background-color: ${r.layer({selectedProminence:"subtle"})[n.Variables.BackgroundSelected]};
+        }
+
+        .${e}-clear div {
+          top: 0;
+        }
+
+        &-separator {
+          display: flex;
+          align-items: center;
+          fill: inherit;
+        }
+      }
+    }
+
+    ${v}
+  `}
+`,B=l.styled.div`
+  ${({$prefixCls:e})=>l.css`
+    .${e} {
+      ${S};
+    }
+  `}
+`;exports.CalendarWrapper=B;exports.DatePickerWrapper=x;
+//# sourceMappingURL=DatePicker.styles.js.map