Ds 109

.theme3/components/css/dialog.ts

@@ -0,0 +1,41 @@
+const css = ({ dt }: { dt: (token: string) => string }) => `
+/* Размеры диалога по умолчанию (default) */
+.p-dialog-extra.p-dialog {
+  min-width: ${dt('sizingDialog.extra.minWidth')};
+  max-width: ${dt('sizingDialog.extra.maxWidth')};
+}
+
+/* Размер SM (small) - для компактных диалогов */
+.p-dialog-sm-extra.p-dialog {
+  min-width: ${dt('sizingDialog.sm.extra.minWidth')};
+  max-width: ${dt('sizingDialog.sm.extra.maxWidth')};
+}
+
+/* Размер LG (large) - для диалогов с большим содержимым */
+.p-dialog-lg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.lg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.lg.extra.maxWidth')};
+}
+
+/* Размер XLG (extra large) - для диалогов с максимальным содержимым */
+.p-dialog-xlg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.xlg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.xlg.extra.maxWidth')};
+}
+
+.p-dialog .p-dialog-header {
+  border-bottom: ${dt('sizing.width.w-0.1')} solid ${dt('content.borderColor')};
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+.p-dialog .p-dialog-footer {
+  flex-direction: row-reverse;
+}
+`;
+
+export default css;

angular.json

@@ -17,6 +17,8 @@
         "build": {
           "builder": "@angular/build:application",
           "options": {
+            "outputPath": "dist/angular-ui-kit",
+            "index": "src/index.html",
             "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -117,5 +119,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/prime-preset/components/css/avatar.ts

@@ -0,0 +1,7 @@
+const css = ({ dt }: any) => `
+.p-avatar {
+  border: 0.07142857142857142rem solid ${dt('avatar.extend.borderColor')};
+}
+`;
+
+export default css;

src/prime-preset/components/css/breadcrumb.ts

@@ -0,0 +1,7 @@
+const css = ({ dt }: any) => `
+.p-breadcrumb .p-breadcrumb-list .p-breadcrumb-item .p-breadcrumb-item-link:hover {
+  background: ${dt('breadcrumb.extend.hoverBackground')};
+}
+`;
+
+export default css;

src/prime-preset/components/css/button.ts

@@ -0,0 +1,66 @@
+const css = ({ dt }: any) => `
+.p-button.p-component .p-button-label {
+  font-family: ${dt('fonts.fontFamily.heading')};
+}
+
+.p-component.p-button:focus-visible {
+  outline: none;
+  box-shadow: ${dt('focusRing.shadow')};
+}
+
+.p-button .p-button-icon {
+  font-size: ${dt('fonts.fontSize.xl')};
+}
+
+.p-button.p-button-lg .p-button-icon {
+  font-size: ${dt('fonts.fontSize.2xl')};
+}
+
+.p-component.p-button-secondary:disabled {
+  color: ${dt('button.extend.disabledColor')};
+  background: ${dt('button.extend.disabledBackground')};
+  mix-blend-mode: unset;
+  opacity: 1;
+}
+
+.p-button-link.p-button {
+  padding: ${dt('button.extend.extLink.paddingY')} ${dt('button.extend.extLink.paddingX')};
+}
+
+.p-button.p-button-link:not(:disabled):hover {
+  color: ${dt('button.extend.extLink.colorHover')};
+}
+
+.p-button.p-button-link:not(:disabled):hover .p-button-label {
+  text-decoration: none;
+}
+
+.p-button-lg.p-button-icon-only.p-button-link {
+  width: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
+  height: ${dt('button.extend.extLink.lg.iconOnlyWidth')};
+}
+
+.p-button-link.p-button-icon-only.p-button {
+  width: ${dt('button.extend.extLink.base.iconOnlyWidth')};
+  height: ${dt('button.extend.extLink.base.iconOnlyWidth')};
+}
+
+.p-button-link.p-button-icon-only.p-button-sm {
+  width: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
+  height: ${dt('button.extend.extLink.sm.iconOnlyWidth')};
+}
+
+.p-button-lg.p-button-icon-only {
+  height: ${dt('button.root.lg.iconOnlyWidth')};
+}
+
+.p-button-icon-only {
+  height: ${dt('button.root.iconOnlyWidth')};
+}
+
+.p-button-sm.p-button-icon-only {
+  height: ${dt('button.root.sm.iconOnlyWidth')};
+}
+`;
+
+export default css;

src/prime-preset/components/css/checkbox.ts

@@ -0,0 +1,7 @@
+const css = ({ dt }: any) => `
+.p-checkbox {
+  border-width: ${dt('checkbox.root.extend.borderWidth')};
+}
+`;
+
+export default css;

src/prime-preset/components/css/confirmdialog.ts

@@ -0,0 +1,80 @@
+const css = ({ dt }: any) => `
+/* Размеры диалога по умолчанию (default) */
+.p-confirmdialog.p-dialog {
+  min-width: ${dt('sizingDialog.extra.minWidth')};
+  max-width: ${dt('sizingDialog.extra.maxWidth')};
+}
+
+/* Размер SM (small) - для компактных диалогов */
+.p-confirmdialog-sm.p-dialog {
+  min-width: ${dt('sizingDialog.sm.extra.minWidth')};
+  max-width: ${dt('sizingDialog.sm.extra.maxWidth')};
+}
+
+/* Размер LG (large) - для диалогов с большим содержимым */
+.p-confirmdialog-lg.p-dialog {
+  min-width: ${dt('sizingDialog.lg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.lg.extra.maxWidth')};
+}
+
+/* Размер XLG (extra large) - для диалогов с максимальным содержимым */
+.p-confirmdialog-xlg.p-dialog {
+  min-width: ${dt('sizingDialog.xlg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.xlg.extra.maxWidth')};
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+/* Стилизация иконки в заголовке диалога */
+.p-confirmdialog .p-dialog-header .p-icon {
+  display: inline-flex;
+  width: ${dt('fonts.fontSize.2xl')};
+  height: ${dt('fonts.fontSize.2xl')};
+}
+
+/* Размер шрифта для иконки (псевдоэлемент ::before) */
+.p-confirmdialog .p-dialog-header .p-icon::before {
+font-size: ${dt('fonts.fontSize.2xl')};
+}
+
+/* Расположение кнопок в футере диалога */
+.p-confirmdialog .p-dialog-footer {
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+}
+
+/* Цвет иконки для severity="success" (успешное действие) */
+.p-confirmdialog[data-pc-severity="success"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-accept .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.success')};
+}
+
+/* Цвет иконки для severity="info" (информационное сообщение) */
+.p-confirmdialog[data-pc-severity="info"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-info .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.info')};
+}
+
+/* Цвет иконки для severity="warn" (предупреждение) */
+.p-confirmdialog[data-pc-severity="warn"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-warn .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.warn')};
+}
+
+/* Цвет иконки для severity="help" (справка) */
+.p-confirmdialog[data-pc-severity="help"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-help .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.help')};
+}
+
+/* Цвет иконки для severity="danger" или "error" (критическое действие) */
+.p-confirmdialog[data-pc-severity="danger"] .p-dialog-header .p-icon,
+.p-confirmdialog[data-pc-severity="error"] .p-dialog-header .p-icon,
+.p-confirmdialog.p-confirm-dialog-error .p-dialog-header .p-icon {
+  color: ${dt('confirmdialog.extend.extIcon.danger')};
+}
+`;
+
+export default css;

src/prime-preset/components/css/dialog.ts

@@ -0,0 +1,41 @@
+const css = ({ dt }: any) => `
+/* Размеры диалога по умолчанию (default) */
+.p-dialog-extra.p-dialog {
+  min-width: ${dt('sizingDialog.extra.minWidth')};
+  max-width: ${dt('sizingDialog.extra.maxWidth')};
+}
+
+/* Размер SM (small) - для компактных диалогов */
+.p-dialog-sm-extra.p-dialog {
+  min-width: ${dt('sizingDialog.sm.extra.minWidth')};
+  max-width: ${dt('sizingDialog.sm.extra.maxWidth')};
+}
+
+/* Размер LG (large) - для диалогов с большим содержимым */
+.p-dialog-lg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.lg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.lg.extra.maxWidth')};
+}
+
+/* Размер XLG (extra large) - для диалогов с максимальным содержимым */
+.p-dialog-xlg-extra.p-dialog {
+  min-width: ${dt('sizingDialog.xlg.extra.minWidth')};
+  max-width: ${dt('sizingDialog.xlg.extra.maxWidth')};
+}
+
+.p-dialog .p-dialog-header {
+  border-bottom: ${dt('sizing.width.w-0.1')} solid ${dt('content.borderColor')};
+}
+
+.p-dialog .p-dialog-header .p-dialog-title {
+  display: flex;
+  align-items: center;
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+.p-dialog .p-dialog-footer {
+  flex-direction: row-reverse;
+}
+`;
+
+export default css;

src/prime-preset/components/css/divider.ts

@@ -0,0 +1,16 @@
+const css = ({ dt }: any) => `
+
+/* Дополнительная обертка для контента с иконками */
+.p-divider-content > div {
+  display: flex;
+  align-items: center;
+  gap: ${dt('spacing.gap.gap-2')};
+}
+
+/* Сброс margin для всех иконок внутри divider-content */
+.p-divider-content i {
+  margin: 0;
+}
+`;
+
+export default css;

src/prime-preset/css.ts

@@ -0,0 +1,32 @@
+import buttonCss from './components/css/button';
+import avatarCss from './components/css/avatar';
+import breadcrumbCss from './components/css/breadcrumb';
+import checkboxCss from './components/css/checkbox';
+import confirmdialogCss from './components/css/confirmdialog';
+import dialogCss from './components/css/dialog';
+import dividerCss from './components/css/divider';
+
+const css = ({ dt }: any) => `
+  ${buttonCss({ dt })}
+  ${avatarCss({ dt })}
+  ${breadcrumbCss({ dt })}
+  ${checkboxCss({ dt })}
+  ${confirmdialogCss({ dt })}
+  ${dialogCss({ dt })}
+  ${dividerCss({ dt })}
+
+  .p-disabled, .p-component:disabled {
+    mix-blend-mode: luminosity;
+  }
+
+  [class*="menu"].p-component {
+    border: none;
+  }
+
+  [class*="menu"][class*="item"]:not(:has([class*="icon"])) [class*="item-content"] > [class*="item"] {
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+`;
+
+export default css;