@simplysm/angular 1.0.138 → 14.0.1

package/package.json

@@ -1,34 +1,47 @@
 {
   "name": "@simplysm/angular",
-  "version": "1.0.138",
-  "description": "심플리즘 패키지 (Angular)",
-  "author": "김석래",
-  "repository": "gihub:kslhunter/simplysm",
-  "license": "MIT",
+  "version": "14.0.1",
+  "description": "심플리즘 패키지 - Angular",
+  "author": "심플리즘",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kslhunter/simplysm.git",
+    "directory": "packages/angular"
+  },
+  "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
+  "files": [
+    "dist",
+    "src",
+    "scss"
+  ],
+  "sideEffects": [
+    "./src/index.ts",
+    "./dist/index.js"
+  ],
   "dependencies": {
-    "@angular/animations": "^7.2.7",
-    "@angular/common": "^7.2.7",
-    "@angular/compiler": "^7.2.7",
-    "@angular/core": "^7.2.7",
-    "@angular/platform-browser": "^7.2.7",
-    "@angular/platform-browser-dynamic": "^7.2.7",
-    "@angular/router": "^7.2.7",
-    "@fortawesome/angular-fontawesome": "^0.3.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.15",
-    "@fortawesome/free-brands-svg-icons": "^5.7.2",
-    "@fortawesome/free-regular-svg-icons": "^5.7.2",
-    "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@simplysm/barobill-common": "1.0.138",
-    "@simplysm/common": "1.0.138",
-    "@simplysm/orm-common": "1.0.138",
-    "@simplysm/smtp-client-common": "1.0.138",
-    "@simplysm/ws-common": "1.0.138",
-    "core-js": "^2.6.5",
-    "jsbarcode": "^4.0.0-alpha.5",
-    "marked": "^0.6.1",
-    "rxjs": "^6.4.0",
-    "zone.js": "^0.8.29"
-  }
-}
+    "@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",
+    "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"
+  },
+  "devDependencies": {
+    "@angular/compiler": "^21.0.0",
+    "@angular/platform-browser-dynamic": "^21.0.0",
+    "sass": "^1.89.0"
+  },
+  "scripts": {}
+}

package/scss/commons/_mixins.scss

@@ -0,0 +1,95 @@
+@use "./variables";
+@use "sass:meta";
+@use "sass:map";
+
+@mixin writeVars($value, $prevKey) {
+  @if meta.type-of($value) == map {
+    @each $key, $val in $value {
+      @if $prevKey == "" {
+        @include writeVars($val, $key);
+      } @else {
+        @include writeVars($val, $prevKey + "-" + $key);
+      }
+    }
+  } @else {
+    --#{$prevKey}: #{$value};
+  }
+}
+
+@mixin elevation($value) {
+  @if $value == none or $value == 0 {
+    box-shadow: none;
+  } @else if $value < 0 {
+    box-shadow:
+      inset 0 0 0.1667rem var(--trans-lighter),
+      inset
+        0
+        calc(#{$value * -1} * var(--elevation-size))
+        calc(#{$value * -1} * 4 * var(--elevation-size))
+        var(--trans-lighter);
+  } @else {
+    box-shadow:
+      0
+        calc(#{$value} * var(--elevation-size))
+        calc(#{$value} * 4 * var(--elevation-size))
+        var(--trans-lighter),
+      0
+        var(--elevation-size)
+        var(--elevation-size)
+        var(--trans-lighter);
+  }
+}
+
+@mixin form-control-base() {
+  display: block;
+  padding: var(--gap-sm) var(--gap-default);
+  border: 1px solid transparent;
+
+  font-size: var(--font-size-default);
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--line-height);
+
+  color: var(--text-trans-default);
+}
+
+@mixin help() {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  cursor: help;
+}
+
+@mixin flex-direction($direction, $defaultGap: null) {
+  flex-direction: $direction;
+
+  @if ($defaultGap) {
+    gap: $defaultGap;
+  }
+
+  // Chromium 84이하 / WebKit 61 (Flex Gap 미지원) .gap-*에 대한 폴백
+  @supports not (appearance: auto) {
+    @if ($defaultGap) {
+      gap: 0;
+      > * + * {
+        @if ($direction == row) {
+          margin-left: $defaultGap;
+        } @else {
+          margin-top: $defaultGap;
+        }
+      }
+    }
+
+    @each $key, $val in map.get(variables.$vars, gap) {
+      &.gap-#{$key} {
+        gap: 0;
+        > * + * {
+          @if ($direction == row) {
+            margin-left: var(--gap-#{$key});
+          } @else {
+            margin-top: var(--gap-#{$key});
+          }
+        }
+      }
+    }
+  }
+}

package/scss/commons/_styles.scss

@@ -0,0 +1,445 @@
+@use "sass:map";
+@use "sass:string";
+
+@use "variables";
+@use "mixins";
+
+@layer base {
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  outline-color: var(--theme-primary-default);
+
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+*:focus {
+  outline: none;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background: var(--background-color);
+  color: var(--text-trans-default);
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--font-size-default);
+  line-height: var(--line-height);
+}
+
+*::-webkit-scrollbar {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.6667rem;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--theme-gray-light);
+  border-radius: 0.6667rem;
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+
+*::-webkit-scrollbar-track {
+  &:hover {
+    background-color: var(--theme-gray-lighter);
+    border-radius: 0.6667rem;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--border-color-lighter);
+  width: 100%;
+  display: block;
+}
+
+p {
+  margin: 0;
+}
+
+pre,
+code {
+  font-size: var(--font-size-default);
+  line-height: var(--line-height);
+  margin: 0;
+}
+
+pre {
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+}
+
+code {
+  font-family: var(--font-family-monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+small {
+  vertical-align: top;
+}
+
+sub {
+  display: inline-block;
+  overflow: visible;
+  height: 0;
+}
+
+form {
+  display: inline;
+}
+
+} // @layer base
+
+@layer utilities {
+
+//-- FONT SIZE
+
+@each $h in (h1, h2, h3, h4, h5, h6) {
+  #{$h} {
+    font-size: var(--font-size-#{$h});
+    line-height: var(--line-height);
+    margin: 0;
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, font-size) {
+  .ft-size-#{$key} {
+    font-size: var(--font-size-#{$key}) !important;
+    line-height: var(--line-height) !important;
+  }
+}
+
+//-- BACKGROUND COLOR
+
+@each $key, $val in map.get(variables.$vars, theme) {
+  @each $key1, $val1 in $val {
+    .bg-theme-#{$key}-#{$key1} {
+      background: var(--theme-#{$key}-#{$key1}) !important;
+    }
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, trans) {
+  .bg-trans-#{$key} {
+    background: var(--trans-#{$key}) !important;
+  }
+}
+
+.bg-default {
+  background: var(--background-color) !important;
+}
+
+.bg-control {
+  background: var(--control-color) !important;
+}
+
+//-- TEXT COLOR
+
+@each $key, $val in map.get(variables.$vars, text-trans) {
+  .tx-trans-#{$key} {
+    color: var(--text-trans-#{$key}) !important;
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, theme) {
+  @each $key1, $val1 in $val {
+    .tx-theme-#{$key}-#{$key1} {
+      color: var(--theme-#{$key}-#{$key1}) !important;
+    }
+  }
+}
+
+//-- TEXT STYLE
+
+.tx-line-through {
+  text-decoration: line-through;
+}
+.tx-underline {
+  text-decoration: underline;
+}
+
+//-- BORDER
+
+.bd {
+  border: 1px solid !important;
+}
+
+@each $key, $val in map.get(variables.$vars, theme) {
+  @each $key1, $val1 in $val {
+    .bd-theme-#{$key}-#{$key1} {
+      border-color: var(--theme-#{$key}-#{$key1}) !important;
+    }
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, trans) {
+  .bd-trans-#{$key} {
+    border-color: var(--trans-#{$key}) !important;
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, border-color) {
+  .bd-color-#{$key} {
+    border-color: var(--border-color-#{$key}) !important;
+  }
+}
+
+.bd-none {
+  border: none !important;
+}
+
+.bd-trans {
+  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;
+  }
+}
+
+//-- BORDER WIDTH
+@each $key, $val in map.get(variables.$vars, gap) {
+  .bd-width-#{$key} {
+    border-width: var(--gap-#{$key}) !important;
+  }
+
+  @each $dir in (top, right, bottom, left) {
+    $d: string.slice($dir, 1, 1);
+    .bd#{$d}-width-#{$key} {
+      border-#{$dir}-width: var(--gap-#{$key}) !important;
+    }
+  }
+}
+
+//-- BORDER RADIUS
+
+@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;
+  }
+}
+
+//-- PADDING, MARGIN
+
+@each $key, $val in map.get(variables.$vars, gap) {
+  .p-#{$key} {
+    padding: var(--gap-#{$key}) !important;
+  }
+
+  .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;
+  }
+
+  .ph-#{$key} {
+    padding-left: var(--gap-#{$key}) !important;
+    padding-right: var(--gap-#{$key}) !important;
+  }
+
+  .mv-#{$key} {
+    margin-top: var(--gap-#{$key}) !important;
+    margin-bottom: var(--gap-#{$key}) !important;
+  }
+
+  .mh-#{$key} {
+    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;
+  }
+
+  .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);
+
+    .p#{$d}-#{$key} {
+      padding-#{$dir}: var(--gap-#{$key}) !important;
+    }
+
+    .m#{$d}-#{$key} {
+      margin-#{$dir}: var(--gap-#{$key}) !important;
+    }
+
+    .#{$d}-#{$key} {
+      #{$dir}: var(--gap-#{$key}) !important;
+    }
+  }
+}
+
+//-- TEXT ALIGN
+
+@each $align in (left, right, center) {
+  .tx-#{$align} {
+    text-align: #{$align} !important;
+  }
+}
+
+//-- ETC
+
+.sh-topbar {
+  height: var(--topbar-height) !important;
+}
+
+.sw-sidebar {
+  width: var(--sidebar-width) !important;
+}
+
+.form-control {
+  @include mixins.form-control-base();
+}
+
+.help {
+  @include mixins.help();
+}
+
+.control-header {
+  line-height: var(--line-height);
+  font-size: var(--font-size-sm);
+  color: var(--theme-gray-default);
+}
+
+.page-header {
+  line-height: var(--line-height);
+  margin-bottom: var(--gap-sm);
+  color: var(--theme-gray-default);
+
+  padding-bottom: var(--gap-xxs);
+  font-size: var(--font-size-sm);
+}
+
+.sticky-top {
+  position: sticky !important;
+  top: 0;
+  z-index: 1;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.fill {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+@each $key, $val in map.get(variables.$vars, gap) {
+  .gap-#{$key} {
+    gap: var(--gap-#{$key});
+  }
+}
+
+@each $val in [start, end, center] {
+  .main-align-#{$val} {
+    justify-content: $val;
+  }
+
+  .cross-align-#{$val} {
+    align-items: $val;
+  }
+}
+
+} // @layer utilities

package/scss/commons/_theme-variables.scss

@@ -0,0 +1,23 @@
+@use "mixins";
+@use "variables";
+@use "../themes/variables-dark" as dark;
+
+@layer base, theme-variant, utilities;
+
+@layer base {
+  :root {
+    @include mixins.writeVars(variables.$colors, "color");
+    @include mixins.writeVars(variables.$vars, "");
+  }
+}
+
+@layer theme-variant {
+  .sd-theme-dark {
+    @include mixins.writeVars(dark.$vars, "");
+  }
+
+  // D7: opt-out 방식 이미지 반전
+  .sd-theme-dark img:not(.no-invert) {
+    filter: invert(1) hue-rotate(180deg);
+  }
+}