@syncfusion/ej2-angular-inplace-editor 20.3.56-ngcc → 20.3.56

package/styles/inplace-editor/_layout.scss

@@ -0,0 +1,658 @@
+@include export-module('inplaceeditor-layout') {
+
+  /*! inplaceeditor layout */
+
+  .e-bigger .e-inplaceeditor,
+  .e-inplaceeditor.e-bigger {
+
+    .e-editable-value-wrapper {
+      padding: $editor-big-value-container-padding;
+
+      .e-editable-value {
+        font-size: $editor-big-value-text-font-size;
+        margin: $editor-big-value-margin;
+      }
+
+      .e-editable-overlay-icon {
+        right: $editor-big-overlay-icon-left-right;
+        width: $editor-big-overlay-icon-container-size;
+
+        &::before {
+          font-size: $editor-big-overlay-icon-size;
+        }
+      }
+
+      .e-spinner-pane .e-spinner-inner {
+        right: $editor-big-value-container-spin-padding;
+      }
+    }
+
+    .e-editable-value-container {
+      padding: $editor-big-value-container-padding;
+
+      .e-editable-value {
+        font-size: $editor-big-value-text-font-size;
+        margin: $editor-big-value-margin;
+      }
+
+      .e-editable-overlay-icon {
+        right: $editor-big-overlay-icon-left-right;
+        width: $editor-big-overlay-icon-container-size;
+
+        &::before {
+          font-size: $editor-big-overlay-icon-size;
+        }
+      }
+
+      .e-spinner-pane .e-spinner-inner {
+        right: $editor-big-value-container-spin-padding;
+      }
+    }
+
+    .e-editable-action-buttons {
+
+      .e-btn-save {
+        margin: $editor-big-btn-save-margin;
+      }
+
+      .e-btn-cancel {
+        margin: $editor-big-btn-cancel-margin;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-editable-value-wrapper {
+
+        .e-editable-value {
+          margin: $editor-rtl-big-value-margin;
+        }
+
+        .e-editable-overlay-icon {
+          left: $editor-big-overlay-icon-left-right;
+          right: auto;
+        }
+
+        .e-spinner-pane,
+        .e-spinner-pane .e-spinner-inner {
+          left: $editor-big-value-container-spin-padding;
+        }
+      }
+
+      .e-editable-value-container {
+
+        .e-editable-value {
+          margin: $editor-rtl-big-value-margin;
+        }
+
+        .e-editable-overlay-icon {
+          left: $editor-big-overlay-icon-left-right;
+          right: auto;
+        }
+
+        .e-spinner-pane,
+        .e-spinner-pane .e-spinner-inner {
+          left: $editor-big-value-container-spin-padding;
+        }
+      }
+
+      .e-editable-action-buttons {
+
+        .e-btn-save {
+          margin: $editor-rtl-big-btn-save-margin;
+        }
+
+        .e-btn-cancel {
+          margin: $editor-rtl-big-btn-cancel-margin;
+        }
+      }
+    }
+  }
+
+  .e-inplaceeditor {
+    display: inline-block;
+    position: relative;
+    width: auto;
+
+    .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide {
+      display: block;
+      visibility: hidden;
+    }
+
+    .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
+      display: block;
+      visibility: hidden;
+    }
+
+    .e-editable-value-wrapper {
+      display: inline-block;
+      padding: $editor-nrml-value-container-padding;
+      position: relative;
+      width: auto;
+      word-break: break-word;
+
+      .e-editable-value {
+        display: inline-block;
+        font-family: $font-family;
+        font-size: $editor-nrml-value-text-font-size;
+        margin: $editor-nrml-value-margin;
+
+        @if $inplace-skin == 'bootstrap4' {
+          line-height: 24px;
+        }
+      }
+
+      .e-editable-overlay-icon {
+        bottom: 0;
+        cursor: pointer;
+        display: inline-flex;
+        height: $editable-overlay-icon-height;
+        position: absolute;
+        right: $editor-nrml-overlay-icon-left-right;
+        top: $editable-overlay-icon;
+        visibility: hidden;
+        width: $editor-nrml-overlay-icon-container-size;
+
+        &::before {
+          align-items: center;
+          display: flex;
+          font-size: $editor-nrml-overlay-icon-size;
+        }
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      &.e-editable-open {
+        user-select: none;
+      }
+
+      &.e-loading {
+        pointer-events: none;
+      }
+
+      .e-spinner-pane .e-spinner-inner {
+        left: unset;
+        right: $editor-nrml-value-container-spin-padding;
+      }
+
+      &:hover {
+
+        .e-editable-overlay-icon {
+          visibility: visible;
+        }
+
+        &.e-editable-open {
+
+          .e-editable-overlay-icon {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+
+    .e-editable-value-container {
+      display: inline-block;
+      padding: $editor-nrml-value-container-padding;
+      position: relative;
+      width: auto;
+      word-break: break-word;
+
+      .e-editable-value {
+        display: inline-block;
+        font-family: $font-family;
+        font-size: $editor-nrml-value-text-font-size;
+        margin: $editor-nrml-value-margin;
+
+        @if $inplace-skin == 'bootstrap4' {
+          line-height: 24px;
+        }
+      }
+
+      .e-editable-overlay-icon {
+        bottom: 0;
+        cursor: pointer;
+        display: inline-flex;
+        height: inherit;
+        position: absolute;
+        right: $editor-nrml-overlay-icon-left-right;
+        top: 0;
+        visibility: hidden;
+        width: $editor-nrml-overlay-icon-container-size;
+
+        &::before {
+          align-items: center;
+          display: flex;
+          font-size: $editor-nrml-overlay-icon-size;
+        }
+      }
+
+      &.e-hide {
+        display: none;
+      }
+
+      &.e-editable-open {
+        user-select: none;
+      }
+
+      &.e-loading {
+        pointer-events: none;
+      }
+
+      .e-spinner-pane .e-spinner-inner {
+        left: unset;
+        right: $editor-nrml-value-container-spin-padding;
+      }
+
+      &:hover {
+
+        .e-editable-overlay-icon {
+          visibility: visible;
+        }
+
+        &.e-editable-open {
+
+          .e-editable-overlay-icon {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+
+    .e-editable-action-buttons {
+      margin-top: $editor-buttons-top-margin;
+      position: absolute;
+      right: 0;
+      z-index: 100;
+    }
+
+    &.e-overlay {
+      user-select: none;
+    }
+
+    &.e-rtl {
+
+      .e-editable-value-wrapper {
+
+        .e-editable-value {
+          margin: $editor-rtl-nrml-value-margin;
+        }
+
+        .e-editable-overlay-icon {
+          left: $editor-nrml-overlay-icon-left-right;
+          right: auto;
+        }
+
+        .e-spinner-pane {
+          right: unset;
+        }
+
+        .e-spinner-pane,
+        .e-spinner-pane .e-spinner-inner {
+          left: $editor-nrml-value-container-spin-padding;
+        }
+      }
+
+      .e-editable-value-container {
+
+        .e-editable-value {
+          margin: $editor-rtl-nrml-value-margin;
+        }
+
+        .e-editable-overlay-icon {
+          left: $editor-nrml-overlay-icon-left-right;
+          right: auto;
+        }
+
+        .e-spinner-pane {
+          right: unset;
+        }
+
+        .e-spinner-pane,
+        .e-spinner-pane .e-spinner-inner {
+          left: $editor-nrml-value-container-spin-padding;
+        }
+      }
+
+      .e-editable-action-buttons {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
+
+  .e-bigger .e-inplaceeditor,
+  .e-inplaceeditor.e-bigger,
+  .e-bigger .e-inplaceeditor-tip,
+  .e-inplaceeditor-tip.e-bigger {
+    width: auto;
+
+    .e-input-group + .e-editable-loading {
+
+      @if $inplace-skin == 'material' {
+        .e-spinner-inner {
+          top: 45%;
+        }
+      }
+    }
+
+    .e-editable-action-buttons {
+
+      .e-btn-save,
+      .e-btn-cancel {
+
+        .e-btn-icon.e-icons {
+
+          @if $inplace-skin == 'bootstrap4' {
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  .e-inplaceeditor,
+  .e-inplaceeditor-tip {
+
+    .e-input-group + .e-editable-loading {
+
+      @if $inplace-skin == 'material' {
+        .e-spinner-inner {
+          top: 35%;
+        }
+      }
+    }
+
+    .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading {
+
+      .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
+        stroke-width: inherit;
+      }
+    }
+
+    .e-input-group + .e-editable-loading {
+
+      @if $inplace-skin == 'material' {
+        .e-spinner-inner {
+          top: 35%;
+        }
+      }
+    }
+
+    .e-editable-elements:not(.e-richtexteditor) + .e-editable-loading {
+
+      .e-spinner-pane .e-spinner-inner .e-spin-bootstrap4 .e-path-circle {
+        stroke-width: inherit;
+      }
+    }
+
+    .e-editable-loading {
+      display: none;
+      min-height: 100%;
+      position: absolute;
+      top: 0;
+
+      &.e-show {
+        display: block;
+
+        &:not(.e-rte-spin-wrap) .e-spinner-inner {
+          left: auto;
+          right: 5px;
+          transform: translateX(-30%) translateY(-50%);
+        }
+      }
+    }
+
+    .e-editable-form {
+      width: 100%;
+
+      &.e-loading {
+
+        .e-input-group-icon {
+          visibility: hidden;
+        }
+      }
+    }
+
+    .e-component-group {
+      margin-bottom: $editor-component-bottom-margin;
+
+      .e-editable-component {
+        min-width: 150px;
+        position: relative;
+      }
+    }
+
+    .e-control-overlay {
+      visibility: hidden;
+
+      &.e-richtexteditor {
+        opacity: .5;
+        pointer-events: none;
+        user-select: none;
+        visibility: visible;
+      }
+    }
+
+    .e-editable-action-buttons {
+
+      .e-btn-save {
+        margin: $editor-nrml-btn-save-margin;
+
+        .e-btn-icon.e-icons {
+          font-size: $editor-btn-save-icon-size;
+        }
+      }
+
+      .e-btn-cancel {
+        margin: $editor-nrml-btn-cancel-margin;
+
+        .e-btn-icon.e-icons {
+          font-size: $editor-btn-cancel-icon-size;
+        }
+      }
+
+      &.e-hide {
+        visibility: hidden;
+      }
+    }
+
+    &.e-rtl {
+
+      .e-editable-action-buttons {
+
+        .e-btn-save {
+          margin: $editor-rtl-nrml-btn-save-margin;
+        }
+
+        .e-btn-cancel {
+          margin: $editor-rtl-nrml-btn-cancel-margin;
+        }
+      }
+
+      .e-editable-loading.e-show:not(.e-rte-spin-wrap) .e-spinner-inner {
+        left: 5px;
+        right: auto;
+        transform: translateX(30%) translateY(-50%);
+      }
+    }
+  }
+
+  .e-bigger .e-inplaceeditor-tip,
+  .e-inplaceeditor-tip.e-bigger {
+
+    &.e-tooltip-wrap {
+
+      .e-tip-content {
+        @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' $inplace-skin == 'FluentUI' {
+          padding: 0;
+        }
+
+        .e-editable-wrapper {
+          padding: $editor-big-tip-wrapper-padding;
+        }
+
+        .e-editable-container {
+          padding: $editor-big-tip-wrapper-padding;
+        }
+
+        .e-editable-title + .e-editable-wrapper {
+          padding: $editor-big-wrapper-title-with-padding;
+        }
+
+        .e-editable-title + .e-editable-container {
+          padding: $editor-big-wrapper-title-with-padding;
+        }
+      }
+    }
+
+    .e-editable-title {
+      font-size: $editor-big-tip-title-font-size;
+      min-height: $editor-big-tip-title-container-size;
+      padding: $editor-big-tip-title-padding;
+    }
+
+    &.e-rtl {
+
+      &.e-tooltip-wrap .e-tip-content {
+
+        .e-editable-title {
+          padding: $editor-rtl-big-tip-title-padding;
+        }
+      }
+    }
+  }
+
+  .e-inplaceeditor-tip {
+    opacity: 1;
+    width: auto;
+
+    &.e-tooltip-wrap {
+      max-width: 100%;
+
+      .e-input-group.e-numeric.e-control-wrapper .e-clear-icon.e-clear-icon-hide,
+      .e-input-group.e-numeric.e-control-container .e-clear-icon.e-clear-icon-hide {
+        display: block;
+        visibility: hidden;
+      }
+
+      .e-tip-content {
+        padding: 0;
+
+        .e-editable-title {
+          align-content: center;
+          display: flex;
+          flex-direction: column;
+          font-family: $font-family;
+          font-size: $editor-nrml-tip-title-font-size;
+          font-weight: $editor-tip-title-font-weight;
+          height: $editor-nrml-tip-title-container-size;
+          justify-content: center;
+          padding: $editor-nrml-tip-title-padding;
+        }
+
+        .e-editable-wrapper {
+          display: flex;
+          padding: $editor-nrml-tip-wrapper-padding;
+
+          .e-editable-action-buttons {
+            float: right;
+            margin-top: $editor-buttons-top-margin;
+            position: relative;
+            right: auto;
+            top: auto;
+          }
+        }
+
+        .e-editable-container {
+          display: flex;
+          padding: $editor-nrml-tip-wrapper-padding;
+
+          .e-editable-action-buttons {
+            float: right;
+            margin-top: $editor-buttons-top-margin;
+            position: relative;
+            right: auto;
+            top: auto;
+          }
+        }
+
+        .e-editable-title + .e-editable-wrapper {
+          padding: $editor-nrml-wrapper-title-with-padding;
+        }
+
+        .e-editable-title + .e-editable-container {
+          padding: $editor-nrml-wrapper-title-with-padding;
+        }
+      }
+    }
+
+    &.e-hide {
+      visibility: hidden;
+    }
+
+    &.e-rtl {
+
+      &.e-tooltip-wrap .e-tip-content {
+
+        .e-editable-title {
+          padding: $editor-rtl-nrml-tip-title-padding;
+        }
+
+        .e-editable-wrapper {
+
+          .e-editable-action-buttons {
+            float: left;
+          }
+        }
+
+        .e-editable-container {
+
+          .e-editable-action-buttons {
+            float: left;
+          }
+        }
+      }
+    }
+  }
+
+  .e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor {
+    background-size: 150px 60px;
+    min-height: 60px;
+  }
+
+  .e-bigger .e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor,
+  .e-bigger.e-content-placeholder.e-inplaceeditor.e-placeholder-inplaceeditor {
+    background-size: 150px 70px;
+    min-height: 70px;
+  }
+
+  @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
+    .e-control .e-inplaceeditor,
+    .e-tooltip-wrap.e-popup.e-inplaceeditor-tip.e-popup-open,
+    .e-inplaceeditor .e-input-group.e-control-wrapper.e-editable-elements {
+      border-radius: 4px;
+    }
+  }
+
+  @if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
+    .e-control.e-inplaceeditor .e-editable-value-wrapper {
+      min-height: 30px;
+    }
+
+    .e-bigger .e-inplaceeditor .e-editable-value-wrapper,
+    .e-inplaceeditor.e-bigger .e-editable-value-wrapper {
+      min-height: 38px;
+    }
+
+    .e-bigger .e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title,
+    .e-bigger.e-inplaceeditor-tip.e-tooltip-wrap.e-popup .e-editable-title {
+      font-size: $editor-big-tip-title-font-size;
+    }
+
+    .e-bigger .e-inplaceeditor .e-editable-action-buttons .e-btn-icon.e-icons .e-bigger.e-inplaceeditor .e-editable-action-buttons .e-btn-icon.e-icons {
+      font-size: 22px;
+    }
+  }
+}

package/styles/inplace-editor/_material-dark-definition.scss

@@ -0,0 +1,76 @@
+/*! Material dark theme definitions and variables */
+
+/*! Value element styles */
+$inplace-skin: 'material-dark' !default;
+$editor-big-value-text-font-size: 14px !default;
+$editor-nrml-value-text-font-size: 13px !default;
+$editor-big-value-container-padding: 8px !default;
+$editor-nrml-value-container-padding: 6px 8px !default;
+$editor-big-value-container-spin-padding: 8px !default;
+$editor-nrml-value-container-spin-padding: 8px !default;
+$editor-big-value-margin: 0 30px 0 0 !default;
+$editor-nrml-value-margin: 0 28px 0 0 !default;
+$editor-rtl-big-value-margin: 0 0 0 30px !default;
+$editor-rtl-nrml-value-margin: 0 0 0 28px !default;
+$editor-big-overlay-icon-size: 16px !default;
+$editor-nrml-overlay-icon-size: 14px !default;
+$editor-big-overlay-icon-container-size: 20px !default;
+$editor-nrml-overlay-icon-container-size: 18px !default;
+$editor-big-overlay-icon-left-right: 8px !default;
+$editor-nrml-overlay-icon-left-right: 8px !default;
+$editor-value-hover-bg: $grey-700 !default;
+$editor-value-text-color: $grey-dark-font !default;
+$editor-overlay-icon-color: $grey-dark-font !default;
+$editor-value-text-border: 1px dashed $editor-value-text-color !default;
+$editable-overlay-icon-height: inherit !default;
+$editable-overlay-icon: 0 !default;
+
+/*! Tooltip styles */
+$editor-tip-border: 0 !default;
+$editor-tip-bg: $grey-800 !default;
+$editor-tip-arrow-icon-color: $grey-800 !default;
+$editor-tip-title-arrow-icon-color: $grey-600 !default;
+$editor-tip-arrow-bdr-color: $grey-800 !default;
+$editor-tip-title-arrow-bdr-color: $grey-600 !default;
+$editor-tip-box-shadow: none !default;
+
+/*! Tip Content styles */
+$editor-tip-content-bdr-radius: 2px !default;
+$editor-popup-tip-content-bdr-radius: 2px !default;
+
+/*! Title styles */
+$editor-tip-title-font-weight: 500 !default;
+$editor-big-tip-title-font-size: 14px !default;
+$editor-nrml-tip-title-font-size: 13px !default;
+$editor-big-tip-title-padding: 0 0 0 12px !default;
+$editor-nrml-tip-title-padding: 0 0 0 10px !default;
+$editor-rtl-big-tip-title-padding: 0 12px 0 0 !default;
+$editor-rtl-nrml-tip-title-padding: 0 10px 0 0 !default;
+$editor-big-tip-title-container-size: 36px !default;
+$editor-nrml-tip-title-container-size: 30px !default;
+$editor-tip-title-bg: $grey-600 !default;
+$editor-tio-title-border-bottom: 0 !default;
+$editor-tip-title-color: $grey-dark-font !default;
+
+/*! Wrapper styles */
+$editor-big-tip-wrapper-padding: 16px !default;
+$editor-nrml-tip-wrapper-padding: 16px !default;
+$editor-big-wrapper-title-with-padding: 10px 16px 16px 16px !default;
+$editor-nrml-wrapper-title-with-padding: 10px 16px 16px 16px !default;
+
+/*! Component group styles */
+$editor-component-bottom-margin: 4px !default;
+
+/*! Button styles */
+$editor-buttons-top-margin: 4px !default;
+$editor-btn-save-icon-size: 16px !default;
+$editor-btn-cancel-icon-size: 16px !default;
+$editor-big-btn-save-margin: 0 4px 0 0 !default;
+$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
+$editor-big-btn-cancel-margin: 0 0 0 4px !default;
+$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
+$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
+$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
+$editor-btn-icon-color: $grey-dark-font !default;