@simplysm/angular 14.0.1 → 14.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.0.1",
+  "version": "14.0.5",
   "description": "심플리즘 패키지 - Angular",
   "author": "심플리즘",
   "license": "Apache-2.0",
@@ -16,32 +16,51 @@
   "files": [
     "dist",
     "src",
-    "scss"
+    "scss",
+    "docs"
   ],
   "sideEffects": [
     "./src/index.ts",
-    "./dist/index.js"
+    "./dist/index.js",
+    "./dist/**/*.css"
   ],
   "dependencies": {
-    "@angular/animations": "^21.0.0",
-    "@angular/common": "^21.0.0",
-    "@angular/core": "^21.0.0",
-    "@angular/platform-browser": "^21.0.0",
-    "@angular/router": "^21.0.0",
-    "@angular/service-worker": "^21.0.0",
-    "@ng-icons/core": "^32.5.0",
-    "@ng-icons/tabler-icons": "^32.4.0",
+    "@angular/animations": "^21.2.6",
+    "@angular/common": "^21.2.6",
+    "@angular/core": "^21.2.6",
+    "@angular/platform-browser": "^21.2.6",
+    "@angular/router": "^21.2.6",
+    "@angular/service-worker": "^21.2.6",
+    "@ng-icons/core": "^33.2.0",
+    "@ng-icons/tabler-icons": "^33.2.0",
+    "@tiptap/core": "^3.21.0",
+    "@tiptap/extension-bold": "^3.21.0",
+    "@tiptap/extension-color": "^3.21.0",
+    "@tiptap/extension-document": "^3.21.0",
+    "@tiptap/extension-highlight": "^3.21.0",
+    "@tiptap/extension-image": "^3.21.0",
+    "@tiptap/extension-paragraph": "^3.21.0",
+    "@tiptap/extension-placeholder": "^3.21.0",
+    "@tiptap/extension-text": "^3.21.0",
+    "@tiptap/extension-text-align": "^3.21.0",
+    "@tiptap/extension-text-style": "^3.21.0",
+    "@tiptap/extension-underline": "^3.21.0",
+    "@tiptap/pm": "^3.21.0",
+    "@tiptap/starter-kit": "^3.21.0",
+    "bwip-js": "^4.8.0",
+    "echarts": "^6.0.0",
+    "html-to-image": "^1.11.13",
+    "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.4.0",
-    "@simplysm/core-browser": "14.0.1",
-    "@simplysm/service-common": "14.0.1",
-    "@simplysm/core-common": "14.0.1",
-    "@simplysm/service-client": "14.0.1"
+    "@simplysm/service-client": "14.0.5",
+    "@simplysm/core-browser": "14.0.5",
+    "@simplysm/service-common": "14.0.5",
+    "@simplysm/core-common": "14.0.5"
   },
   "devDependencies": {
-    "@angular/compiler": "^21.0.0",
-    "@angular/platform-browser-dynamic": "^21.0.0",
-    "sass": "^1.89.0"
+    "@angular/compiler": "^21.2.6",
+    "@angular/platform-browser-dynamic": "^21.2.6"
   },
   "scripts": {}
 }

package/scss/commons/_mixins.scss

@@ -59,6 +59,40 @@
   cursor: help;
 }
 
+@mixin border-direction-variants($dir, $d) {
+  .bd#{$d} {
+    border-#{$dir}: 1px solid !important;
+  }
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .bd#{$d}-theme-#{$key}-#{$key1} {
+        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, trans) {
+    .bd#{$d}-trans-#{$key} {
+      border-#{$dir}-color: var(--trans-#{$key}) !important;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, border-color) {
+    .bd#{$d}-color-#{$key} {
+      border-#{$dir}-color: var(--border-color-#{$key}) !important;
+    }
+  }
+
+  .bd#{$d}-none {
+    border-#{$dir}: none !important;
+  }
+
+  .bd#{$d}-transparent {
+    border-#{$dir}-color: transparent !important;
+  }
+}
+
 @mixin flex-direction($direction, $defaultGap: null) {
   flex-direction: $direction;
 

package/scss/commons/_styles.scss

@@ -206,43 +206,13 @@ form {
   border: none !important;
 }
 
-.bd-trans {
+.bd-transparent {
   border-color: transparent !important;
 }
 
 @each $dir in (top, right, bottom, left) {
   $d: string.slice($dir, 1, 1);
-  .bd#{$d} {
-    border-#{$dir}: 1px solid !important;
-  }
-
-  @each $key, $val in map.get(variables.$vars, theme) {
-    @each $key1, $val1 in $val {
-      .bd#{$d}-theme-#{$key}-#{$key1} {
-        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
-      }
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, trans) {
-    .bd#{$d}-trans-#{$key} {
-      border-#{$dir}-color: var(--trans-#{$key}) !important;
-    }
-  }
-
-  @each $key, $val in map.get(variables.$vars, border-color) {
-    .bd#{$d}-color-#{$key} {
-      border-#{$dir}-color: var(--border-color-#{$key}) !important;
-    }
-  }
-
-  .bd#{$d}-none {
-    border-#{$dir}: none !important;
-  }
-
-  .bd#{$d}-trans {
-    border-#{$dir}-color: transparent !important;
-  }
+  @include mixins.border-direction-variants($dir, $d);
 }
 
 //-- BORDER WIDTH
@@ -261,29 +231,24 @@ form {
 
 //-- BORDER RADIUS
 
+$radius-dirs: (
+  t: (top-right, top-left),
+  b: (bottom-right, bottom-left),
+  l: (top-left, bottom-left),
+  r: (top-right, bottom-right),
+);
+
 @each $key, $val in map.get(variables.$vars, border-radius) {
   .bd-radius-#{$key} {
     border-radius: var(--border-radius-#{$key}) !important;
   }
 
-  .bdt-radius-#{$key} {
-    border-top-right-radius: var(--border-radius-#{$key}) !important;
-    border-top-left-radius: var(--border-radius-#{$key}) !important;
-  }
-
-  .bdb-radius-#{$key} {
-    border-bottom-right-radius: var(--border-radius-#{$key}) !important;
-    border-bottom-left-radius: var(--border-radius-#{$key}) !important;
-  }
-
-  .bdl-radius-#{$key} {
-    border-top-left-radius: var(--border-radius-#{$key}) !important;
-    border-bottom-left-radius: var(--border-radius-#{$key}) !important;
-  }
-
-  .bdr-radius-#{$key} {
-    border-top-right-radius: var(--border-radius-#{$key}) !important;
-    border-bottom-right-radius: var(--border-radius-#{$key}) !important;
+  @each $d, $corners in $radius-dirs {
+    .bd#{$d}-radius-#{$key} {
+      @each $corner in $corners {
+        border-#{$corner}-radius: var(--border-radius-#{$key}) !important;
+      }
+    }
   }
 }
 
@@ -297,21 +262,7 @@ form {
   .m-#{$key} {
     margin: var(--gap-#{$key}) !important;
   }
-}
-
-@each $key, $val in map.get(variables.$vars, gap) {
-  @each $key1, $val1 in map.get(variables.$vars, gap) {
-    .p-#{$key}-#{$key1} {
-      padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
-    }
-
-    .m-#{$key}-#{$key1} {
-      margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
-    }
-  }
-}
 
-@each $key, $val in map.get(variables.$vars, gap) {
   .pv-#{$key} {
     padding-top: var(--gap-#{$key}) !important;
     padding-bottom: var(--gap-#{$key}) !important;
@@ -331,9 +282,7 @@ form {
     margin-left: var(--gap-#{$key}) !important;
     margin-right: var(--gap-#{$key}) !important;
   }
-}
 
-@each $key, $val in map.get(variables.$vars, gap) {
   .sw-#{$key} {
     width: var(--gap-#{$key}) !important;
   }
@@ -341,9 +290,7 @@ form {
   .sh-#{$key} {
     height: var(--gap-#{$key}) !important;
   }
-}
 
-@each $key, $val in map.get(variables.$vars, gap) {
   @each $dir in (top, right, bottom, left) {
     $d: string.slice($dir, 1, 1);
 
@@ -361,6 +308,18 @@ form {
   }
 }
 
+@each $key, $val in map.get(variables.$vars, gap) {
+  @each $key1, $val1 in map.get(variables.$vars, gap) {
+    .p-#{$key}-#{$key1} {
+      padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+    }
+
+    .m-#{$key}-#{$key1} {
+      margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+    }
+  }
+}
+
 //-- TEXT ALIGN
 
 @each $align in (left, right, center) {

package/scss/commons/_variables.scss

@@ -44,6 +44,12 @@ $colors: (
   );
 }
 
+// Breakpoints for media queries (CSS custom properties cannot be used in media queries)
+$breakpoint-mobile: 520px;
+$breakpoint-xxs: 800px;
+$breakpoint-xs: 1024px;
+$breakpoint-sm: 1280px;
+
 $vars: (
   theme: (
     "gray": color-map(map.get($colors, gray), -5%),
@@ -129,6 +135,7 @@ $vars: (
   background-color: white,
   background-rev-color: black,
   control-color: white,
+  busy-overlay-bg: rgba(255, 255, 255, 0.6),
   animation-duration: 0.2s,
   elevation-size: 0.0833rem,
   sidebar: (

package/scss/controls/_card.scss

@@ -0,0 +1,29 @@
+@use "../commons/mixins";
+
+.card {
+  display: block;
+  background: var(--control-color);
+  border-radius: var(--border-radius-default);
+  transition: box-shadow 0.3s ease-in-out;
+  @include mixins.elevation(2);
+  animation: sd-card var(--animation-duration) ease-out;
+  opacity: 0;
+  transform: translateY(-1em);
+  animation-fill-mode: forwards;
+
+  &:hover,
+  &:focus-within {
+    @include mixins.elevation(4);
+  }
+}
+
+@keyframes sd-card {
+  from {
+    opacity: 0;
+    transform: translateY(-1em);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}

package/scss/controls/_flex.scss

@@ -0,0 +1,38 @@
+@use "sass:map";
+@use "../commons/variables";
+@use "../commons/mixins";
+
+.flex-row {
+  display: flex !important;
+  flex-wrap: nowrap;
+  @include mixins.flex-direction(row);
+}
+
+.flex-column {
+  display: flex !important;
+  flex-wrap: nowrap;
+  @include mixins.flex-direction(column);
+}
+
+.flex-row-inline {
+  display: inline-flex !important;
+  @include mixins.flex-direction(row);
+}
+
+.flex-column-inline {
+  display: inline-flex !important;
+  @include mixins.flex-direction(column);
+}
+
+.flex-auto {
+  flex: 1 0 auto;
+}
+
+.flex-fill {
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.flex-min {
+  flex: 0 0 0;
+}

package/scss/controls/_form-box.scss

@@ -0,0 +1,49 @@
+@use "../commons/mixins";
+
+.form-box {
+  display: flex;
+  @include mixins.flex-direction(column, var(--gap-default));
+
+  > div,
+  > .form-box-item {
+    display: block;
+
+    > label {
+      display: block;
+      margin-bottom: var(--gap-xs);
+      white-space: nowrap;
+      font-weight: bold;
+      border: 1px solid transparent;
+    }
+
+    @media all and (pointer: coarse) {
+      margin-bottom: var(--gap-default);
+
+      > label {
+        margin-bottom: var(--gap-xxs);
+      }
+    }
+  }
+}
+
+.form-box-inline {
+  display: inline-flex;
+  flex-wrap: wrap;
+  @include mixins.flex-direction(row, var(--gap-sm));
+
+  > div,
+  > .form-box-item {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    > label {
+      display: block;
+      white-space: nowrap;
+      font-weight: bold;
+      border: 1px solid transparent;
+      padding-left: var(--gap-sm);
+      padding-right: var(--gap-sm);
+    }
+  }
+}

package/scss/controls/_form-table.scss

@@ -0,0 +1,45 @@
+.form-table {
+  display: table;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0;
+
+  > * > tr,
+  > tr {
+    > * {
+      padding: 0 var(--gap-default) var(--gap-sm) 0;
+      vertical-align: middle;
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    &:last-child > * {
+      padding-bottom: 0;
+    }
+
+    > th {
+      padding-left: var(--gap-sm);
+      text-align: right;
+      width: 0;
+      white-space: nowrap;
+
+      &.form-table-header {
+        text-align: left;
+        line-height: var(--line-height);
+        margin-bottom: var(--gap-sm);
+        color: var(--theme-gray-default);
+        font-weight: normal;
+
+        padding: var(--gap-xxl) 0 var(--gap-sm) 0;
+        font-size: var(--font-size-sm);
+      }
+    }
+  }
+
+  > tbody:first-child > tr:first-child > th.form-table-header,
+  > tr:first-child > th.form-table-header {
+    padding-top: 0;
+  }
+}

package/scss/controls/_grid.scss

@@ -0,0 +1,36 @@
+@use "../commons/variables";
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+}
+
+@for $i from 1 through 12 {
+  .grid-#{$i} {
+    grid-column-end: span #{$i};
+  }
+}
+
+@media (max-width: variables.$breakpoint-sm) {
+  @for $i from 1 through 12 {
+    .grid-sm-#{$i} {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@media (max-width: variables.$breakpoint-xs) {
+  @for $i from 1 through 12 {
+    .grid-xs-#{$i} {
+      grid-column-end: span #{$i};
+    }
+  }
+}
+
+@media (max-width: variables.$breakpoint-xxs) {
+  @for $i from 1 through 12 {
+    .grid-xxs-#{$i} {
+      grid-column-end: span #{$i};
+    }
+  }
+}

package/scss/controls/_table.scss

@@ -0,0 +1,99 @@
+$border-color-light: var(--theme-gray-lighter);
+$border-color-dark: var(--border-color-default);
+
+.table {
+  display: table;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border-right: 1px solid $border-color-dark;
+  border-bottom: 1px solid $border-color-dark;
+
+  > * > tr,
+  > tr {
+    > * {
+      padding: var(--gap-xs) var(--gap-sm);
+      border-left: 1px solid $border-color-light;
+      border-top: 1px solid $border-color-light;
+
+      &:first-child {
+        border-left: 1px solid $border-color-dark;
+      }
+    }
+
+    &:first-child > * {
+      border-top: 1px solid $border-color-dark;
+    }
+  }
+
+  > tbody > tr,
+  > tr {
+    &:first-child {
+      border-top: 1px solid $border-color-dark;
+    }
+
+    > th {
+      background: var(--theme-gray-lightest);
+    }
+
+    > td {
+      vertical-align: top;
+    }
+  }
+
+  > thead > tr > th {
+    background: var(--theme-gray-lightest);
+  }
+
+  &.table-inset {
+    border-right: none;
+    border-bottom: none;
+
+    > * > tr,
+    > tr {
+      > *:first-child {
+        border-left: none;
+      }
+    }
+
+    > *:first-child > tr:first-child,
+    > tr:first-child {
+      > * {
+        border-top: none;
+      }
+    }
+  }
+
+  &.table-inline {
+    width: auto;
+  }
+
+  &.table-bd-v {
+    border-bottom: none;
+
+    > * > tr,
+    > tr {
+      > * {
+        border-top: none;
+      }
+    }
+  }
+
+  &.table-bd-h {
+    border-right: none;
+
+    > tbody > tr,
+    > tr {
+      > td:first-child {
+        border-left: none;
+      }
+    }
+
+    > * > tr,
+    > tr {
+      > * {
+        border-left: none;
+      }
+    }
+  }
+}

package/scss/styles.scss

@@ -1,6 +1,13 @@
 @use "commons/theme-variables";
 @use "commons/styles";
 
+@use "controls/flex";
+@use "controls/grid";
+@use "controls/card";
+@use "controls/form-box";
+@use "controls/form-table";
+@use "controls/table";
+
 ng-icon {
   --ng-icon__size: 1.33em;
   vertical-align: -0.2em !important;

package/scss/themes/_variables-dark.scss

@@ -33,6 +33,7 @@ $vars: (
     default: rgba(255, 255, 255, 0.2),
     light: rgba(255, 255, 255, 0.1),
     lighter: rgba(255, 255, 255, 0.03),
+    lightest: rgba(255, 255, 255, 0.05),
     rev-default: rgba(0, 0, 0, 0.1),
     rev-light: rgba(0, 0, 0, 0.2),
     rev-lighter: rgba(0, 0, 0, 0.3),
@@ -58,6 +59,7 @@ $vars: (
   background-color: #000,
   background-rev-color: #fff,
   control-color: #000,
+  busy-overlay-bg: rgba(0, 0, 0, 0.6),
   sheet: (
     bg: var(--theme-gray-lightest),
   ),

package/src/core/commons.ts

@@ -0,0 +1,4 @@
+export const TXT_CHANGE_IGNORE_CONFIRM = `
+변경사항이 있습니다. 모든 변경사항을 무시하시겠습니까?
+- 확인: 변경사항을 무시하고, 현재 요청한 작업을 수행
+- 취소: 현재 요청한 작업을 취소하고, 변경사항 재검토`.trim();

package/src/core/directives/sd-events.directive.ts

@@ -21,18 +21,18 @@ import type { ISdResizeEvent } from "../plugins/events/sd-resize-event.plugin";
   standalone: true,
 })
 export class SdEventsDirective {
-  // Click
+  // 클릭
   "click.capture" = output<MouseEvent>();
   "click.once" = output<MouseEvent>();
   "click.capture.once" = output<MouseEvent>();
 
-  // Mouse
+  // 마우스
   "mousedown.capture" = output<MouseEvent>();
   "mouseup.capture" = output<MouseEvent>();
   "mouseover.capture" = output<MouseEvent>();
   "mouseout.capture" = output<MouseEvent>();
 
-  // Keyboard
+  // 키보드
   "keydown.capture" = output<KeyboardEvent>();
   "keyup.capture" = output<KeyboardEvent>();
 
@@ -40,7 +40,7 @@ export class SdEventsDirective {
   "focus.capture" = output<FocusEvent>();
   "blur.capture" = output<FocusEvent>();
 
-  // Form
+  // 폼
   "invalid.capture" = output<Event>();
 
   // Scroll (passive로 성능 최적화)
@@ -59,7 +59,7 @@ export class SdEventsDirective {
   "touchmove.capture.passive" = output<TouchEvent>();
   "touchend.passive" = output<TouchEvent>();
 
-  // Drag & Drop
+  // 드래그 앤 드롭
   "dragover.capture" = output<DragEvent>();
   "dragenter.capture" = output<DragEvent>();
   "dragleave.capture" = output<DragEvent>();
@@ -69,10 +69,10 @@ export class SdEventsDirective {
   "transitionend.once" = output<TransitionEvent>();
   "animationend.once" = output<AnimationEvent>();
 
-  // Custom events
+  // 커스텀 이벤트
   "sdResize" = output<ISdResizeEvent>();
 
-  // Command events
+  // 커맨드 이벤트
   "sdRefreshCommand" = output<KeyboardEvent>();
   "sdSaveCommand" = output<KeyboardEvent>();
   "sdInsertCommand" = output<KeyboardEvent>();