@c8y/style 1023.17.19 → 1023.22.2

package/styles/utilities/_text-utils.scss

@@ -0,0 +1,691 @@
+@use "../../variables/index" as *;
+
+/**
+ * Text Utility Classes
+ *
+ * Note: Uses design tokens where applicable ($line-height-base, $component-color-text-muted, $size-32).
+ *
+ * Intentionally hardcoded values:
+ * - Font weights (200, 400, 600, 700): Standard CSS font-weight scale
+ * - Font sizes (10px, 12px, 14px, 16px): Typography utility class scale
+ * - Unitless line-heights (0, 1, 1.2): CSS best practice for line-height
+ * - Color keywords (yellow, orange): Monaco editor highlight colors
+ */
+
+//Font weight
+.text-light {
+  font-weight: 200 !important;
+}
+.text-normal {
+  font-weight: 400 !important;
+}
+.text-medium {
+  font-weight: 600 !important;
+}
+.text-bold,
+.strong {
+  font-weight: 700 !important;
+}
+
+.text-tabular {
+  font-feature-settings: "tnum" 1, "kern" 1 !important;
+}
+
+.text-rtl {
+  direction: rtl !important;
+}
+
+.first-line-bold::first-line {
+  font-weight: 600 !important;
+}
+
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .text-light-xs {
+    font-weight: 200 !important;
+  }
+  .text-normal-xs {
+    font-weight: 400 !important;
+  }
+  .text-medium-xs {
+    font-weight: 600 !important;
+  }
+  .text-bold-xs,
+  .strong-xs {
+    font-weight: bold !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .text-light-sm {
+    font-weight: 200 !important;
+  }
+  .text-normal-sm {
+    font-weight: 400 !important;
+  }
+  .text-medium-sm {
+    font-weight: 600 !important;
+  }
+  .text-bold-sm,
+  .strong-sm {
+    font-weight: bold !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .text-light-md {
+    font-weight: 200 !important;
+  }
+  .text-normal-md {
+    font-weight: 400 !important;
+  }
+  .text-medium-md {
+    font-weight: 600 !important;
+  }
+  .text-bold-md,
+  .strong-md {
+    font-weight: bold !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .text-light-lg {
+    font-weight: 200 !important;
+  }
+  .text-normal-lg {
+    font-weight: 400 !important;
+  }
+  .text-medium-lg {
+    font-weight: 600 !important;
+  }
+  .text-bold-lg,
+  .strong-lg {
+    font-weight: bold !important;
+  }
+}
+/* #endregion */
+
+// Font size
+.text-10 {
+  font-size: 10px !important;
+}
+.text-12 {
+  font-size: 12px !important;
+}
+.text-14 {
+  font-size: 14px !important;
+}
+.text-16 {
+  font-size: 16px !important;
+}
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .text-10-xs {
+    font-size: 10px !important;
+  }
+  .text-12-xs {
+    font-size: 12px !important;
+  }
+  .text-14-xs {
+    font-size: 14px !important;
+  }
+  .text-16-xs {
+    font-size: 16px !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .text-10-sm {
+    font-size: 10px !important;
+  }
+  .text-12-sm {
+    font-size: 12px !important;
+  }
+  .text-14-sm {
+    font-size: 14px !important;
+  }
+  .text-16-sm {
+    font-size: 16px !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .text-10-md {
+    font-size: 10px !important;
+  }
+  .text-12-md {
+    font-size: 12px !important;
+  }
+  .text-14-md {
+    font-size: 14px !important;
+  }
+  .text-16-md {
+    font-size: 16px !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .text-10-lg {
+    font-size: 10px !important;
+  }
+  .text-12-lg {
+    font-size: 12px !important;
+  }
+  .text-14-lg {
+    font-size: 14px !important;
+  }
+  .text-16-lg {
+    font-size: 16px !important;
+  }
+}
+/* #endregion */
+
+// Line height
+.l-h-base {
+  line-height: $line-height-base !important;
+}
+.l-h-inherit {
+  line-height: inherit !important;
+}
+.l-h-0 {
+  line-height: 0 !important;
+}
+.l-h-1 {
+  line-height: 1 !important;
+}
+.l-h-tight {
+  line-height: 1.2 !important;
+}
+.l-h-input {
+  line-height: $size-32 !important;
+}
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .l-h-base-xs {
+    line-height: $line-height-base !important;
+  }
+  .l-h-inherit-xs {
+    line-height: inherit !important;
+  }
+  .l-h-0-xs {
+    line-height: 0 !important;
+  }
+  .l-h-1-xs {
+    line-height: 1 !important;
+  }
+  .l-h-tight-xs {
+    line-height: 1.2 !important;
+  }
+  .l-h-input-xs {
+    line-height: $size-32 !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .l-h-base-sm {
+    line-height: $line-height-base !important;
+  }
+  .l-h-inherit-sm {
+    line-height: inherit !important;
+  }
+  .l-h-0-sm {
+    line-height: 0 !important;
+  }
+  .l-h-1-sm {
+    line-height: 1 !important;
+  }
+  .l-h-tight-sm {
+    line-height: 1.2 !important;
+  }
+  .l-h-input-sm {
+    line-height: $size-32 !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .l-h-base-md {
+    line-height: $line-height-base !important;
+  }
+  .l-h-inherit-md {
+    line-height: inherit !important;
+  }
+  .l-h-0-md {
+    line-height: 0 !important;
+  }
+  .l-h-1-md {
+    line-height: 1 !important;
+  }
+  .l-h-tight-md {
+    line-height: 1.2 !important;
+  }
+  .l-h-input-md {
+    line-height: $size-32 !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .l-h-base-lg {
+    line-height: $line-height-base !important;
+  }
+  .l-h-inherit-lg {
+    line-height: inherit !important;
+  }
+  .l-h-0-lg {
+    line-height: 0 !important;
+  }
+  .l-h-1-lg {
+    line-height: 1 !important;
+  }
+  .l-h-tight-lg {
+    line-height: 1.2 !important;
+  }
+  .l-h-input-lg {
+    line-height: $size-32 !important;
+  }
+}
+/* #endregion */
+
+// Letter case
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-label-small {
+  color: $component-color-text-muted !important;
+  text-transform: uppercase !important;
+  font-size: 10px !important;
+}
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .text-lowercase-xs {
+    text-transform: lowercase !important;
+  }
+  .text-uppercase-xs {
+    text-transform: uppercase !important;
+  }
+  .text-capitalize-xs {
+    text-transform: capitalize !important;
+  }
+
+  .text-label-small-xs {
+    color: $component-color-text-muted !important;
+    text-transform: uppercase !important;
+    font-size: 10px !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .text-lowercase-sm {
+    text-transform: lowercase !important;
+  }
+  .text-uppercase-sm {
+    text-transform: uppercase !important;
+  }
+  .text-capitalize-sm {
+    text-transform: capitalize !important;
+  }
+
+  .text-label-small-sm {
+    color: $component-color-text-muted !important;
+    text-transform: uppercase !important;
+    font-size: 10px !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .text-lowercase-md {
+    text-transform: lowercase !important;
+  }
+  .text-uppercase-md {
+    text-transform: uppercase !important;
+  }
+  .text-capitalize-md {
+    text-transform: capitalize !important;
+  }
+
+  .text-label-small-md {
+    color: $component-color-text-muted !important;
+    text-transform: uppercase !important;
+    font-size: 10px !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .text-lowercase-lg {
+    text-transform: lowercase !important;
+  }
+  .text-uppercase-lg {
+    text-transform: uppercase !important;
+  }
+  .text-capitalize-lg {
+    text-transform: capitalize !important;
+  }
+
+  .text-label-small-lg {
+    color: $component-color-text-muted !important;
+    text-transform: uppercase !important;
+    font-size: 10px !important;
+  }
+}
+/* #endregion */
+
+// Text alignment
+.text-left {
+  text-align: left !important;
+}
+.text-right {
+  text-align: right !important;
+}
+.text-center {
+  text-align: center !important;
+}
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .text-left-xs {
+    text-align: left !important;
+  }
+  .text-right-xs {
+    text-align: right !important;
+  }
+  .text-center-xs {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .text-left-sm {
+    text-align: left !important;
+  }
+  .text-right-sm {
+    text-align: right !important;
+  }
+  .text-center-sm {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .text-left-md {
+    text-align: left !important;
+  }
+  .text-right-md {
+    text-align: right !important;
+  }
+  .text-center-md {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .text-left-lg {
+    text-align: left !important;
+  }
+  .text-right-lg {
+    text-align: right !important;
+  }
+  .text-center-lg {
+    text-align: center !important;
+  }
+}
+/* #endregion */
+
+// White space
+.text-nowrap {
+  white-space: nowrap !important;
+}
+.text-break-word {
+  word-break: break-word !important;
+
+  overflow-wrap: break-word !important;
+}
+
+.text-break-all {
+  word-break: break-all !important;
+}
+
+.text-pre {
+  white-space: pre !important;
+}
+.text-pre-wrap {
+  white-space: pre-wrap !important;
+}
+
+.text-pre-line {
+  white-space: pre-line !important;
+}
+.text-pre-normal {
+  white-space: normal !important;
+}
+
+.text-pretty {
+  text-wrap: pretty;
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .text-nowrap-xs {
+    white-space: nowrap !important;
+  }
+  .text-break-word-xs {
+    word-break: break-word !important;
+
+    overflow-wrap: break-word !important;
+  }
+  .text-break-all-xs {
+    word-break: break-all !important;
+  }
+  .text-pre-xs {
+    white-space: pre !important;
+  }
+  .text-pre-wrap-xs {
+    white-space: pre-wrap !important;
+  }
+  .text-pre-line-xs {
+    white-space: pre-line !important;
+  }
+  .text-pre-normal-xs {
+    white-space: normal !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .text-nowrap-sm {
+    white-space: nowrap !important;
+  }
+  .text-break-word-sm {
+    word-break: break-word !important;
+
+    overflow-wrap: break-word !important;
+  }
+  .text-break-all-sm {
+    word-break: break-all !important;
+  }
+  .text-pre-sm {
+    white-space: pre !important;
+  }
+  .text-pre-wrap-sm {
+    white-space: pre-wrap !important;
+  }
+  .text-pre-line-sm {
+    white-space: pre-line !important;
+  }
+  .text-pre-normal-sm {
+    white-space: normal !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .text-nowrap-md {
+    white-space: nowrap !important;
+  }
+  .text-break-word-md {
+    word-break: break-word !important;
+
+    overflow-wrap: break-word !important;
+  }
+  .text-break-all-md {
+    word-break: break-all !important;
+  }
+  .text-pre-md {
+    white-space: pre !important;
+  }
+  .text-pre-wrap-md {
+    white-space: pre-wrap !important;
+  }
+  .text-pre-line-md {
+    white-space: pre-line !important;
+  }
+  .text-pre-normal-md {
+    white-space: normal !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .text-nowrap-lg {
+    white-space: nowrap !important;
+  }
+  .text-break-word-lg {
+    word-break: break-word !important;
+
+    overflow-wrap: break-word !important;
+  }
+  .text-break-all-lg {
+    word-break: break-all !important;
+  }
+  .text-pre-lg {
+    white-space: pre !important;
+  }
+  .text-pre-wrap-lg {
+    white-space: pre-wrap !important;
+  }
+  .text-pre-line-lg {
+    white-space: pre-line !important;
+  }
+  .text-pre-normal-lg {
+    white-space: normal !important;
+  }
+}
+/* #endregion */
+
+//truncation
+.text-truncate {
+  display: block;
+  overflow: hidden !important;
+  max-width: 100% !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+.text-truncate-wrap {
+  display: block;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+// line clamp
+
+.line-clamp {
+  &--2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+
+//media queries
+/* #region */
+@media (max-width: $screen-xs-max) {
+  .text-truncate-xs {
+    display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+  .text-truncate-wrap-xs {
+    display: block;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+}
+
+@media (min-width: $screen-sm-min) {
+  .text-truncate-sm {
+    display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+  .text-truncate-wrap-sm {
+    display: block;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .text-truncate-md {
+    display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+  .text-truncate-wrap-md {
+    display: block;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+}
+
+@media (min-width: $screen-lg-min) {
+  .text-truncate-lg {
+    display: block;
+    overflow: hidden !important;
+    max-width: 100% !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+  .text-truncate-wrap-lg {
+    display: block;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+  }
+}
+/* #endregion */
+
+.text-monospace {
+  font-family: $font-family-monospace !important;
+}
+
+// Font size inherit
+.font-size-inherit {
+  font-size: inherit !important;
+}
+
+// Monaco Editor search string highlight
+.monaco-editor {
+  .findMatchInline {
+    background: yellow;
+  }
+  .currentFindMatchInline {
+    background: orange;
+    font-weight: bold;
+  }
+}

package/styles/utilities.less

@@ -112,10 +112,7 @@
 [ng-click],
 .pointer {
   cursor: pointer !important;
-  &.no-cursor,
-  .no-cursor {
-    cursor: auto !important;
-  }
+  // Removed unused cursor utility - verified 0 usages: .no-cursor
 }
 
 .no-pointer {

package/styles/vendor/ace-editor/_ace-editor.scss

@@ -0,0 +1,26 @@
+@use "../../../variables/index" as *;
+
+[ui-ace] .ace_tooltip {
+  max-width: 600px;
+  white-space: pre-wrap;
+}
+body .ace_editor * {
+  font-family: $font-family-monospace!important;
+}
+
+@media (max-width: $screen-md-min) {
+  .ace_editor {
+    min-height: 350px;
+  }
+}
+
+
+.ace-monokai .ace_marker-layer{
+  .ace_selected-word{
+    border-bottom: 2px solid yellow !important;
+  }
+  .ace_selection{
+    background-color: rgba(255, 255, 0, 0.25) !important;
+    border: 1px solid yellow !important;
+  }
+}