@xsmusices/ui 0.0.0-stage → 1.41.1

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@xsmusices/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.41.1",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/xsmusices-ui.mjs"
+    },
+    "./styles/shared-base.css": "./styles/shared-base.css",
+    "./styles/shared-utilities.css": "./styles/shared-utilities.css",
+    "./styles/*": "./styles/*"
+  },
+  "files": [
+    "fesm2022",
+    "index.d.ts",
+    "styles"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@ngx-formly/core": "^7.1.0",
+    "rxjs": "^7.8.0",
+    "dayjs": "^1.11.0"
+  },
+  "dependencies": {
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "chart.js": "^4.4.0",
+    "dompurify": "^3.0.5",
+    "leaflet": "^1.9.4",
+    "leaflet.fullscreen": "^5.2.1",
+    "leaflet.markercluster": "^1.5.3",
+    "maplibre-gl": "^6.4.1",
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/xsmusices-ui.mjs",
+  "typings": "index.d.ts"
+}

package/styles/shared-base.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --tw-border-opacity: 1;
+  --primary: #000000;
+  --secondary: rgb(24 24 27 / var(--tw-border-opacity));
+}
+
+*:focus {
+  outline: none;
+}
+*:focus-visible {
+  outline: 1px solid rgba(113, 113, 122, 0.4);
+  outline-offset: 1px;
+}
+
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--primary) var(--secondary);
+}
+
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--primary);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--secondary);
+  border-radius: 20px;
+  border: 3px solid var(--primary);
+}
+
+body {
+  font-family: 'Titillium Web', sans-serif;
+}
+
+app-root {
+  height: 100dvh;
+}
+
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('/assets/fonts/TitilliumWeb-ExtraLight.woff2') format('woff2'),
+    url('/assets/fonts/TitilliumWeb-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('/assets/fonts/TitilliumWeb-Light.woff2') format('woff2'),
+    url('/assets/fonts/TitilliumWeb-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('/assets/fonts/TitilliumWeb-Regular.woff2') format('woff2'),
+    url('/assets/fonts/TitilliumWeb-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('/assets/fonts/TitilliumWeb-SemiBold.woff2') format('woff2'),
+    url('/assets/fonts/TitilliumWeb-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Titillium Web';
+  src: url('/assets/fonts/TitilliumWeb-Bold.woff2') format('woff2'),
+    url('/assets/fonts/TitilliumWeb-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}

package/styles/shared-utilities.css

@@ -0,0 +1,349 @@
+.card {
+  @apply relative flex-shrink-0 overflow-hidden bg-black border rounded-xl border-zinc-900 snap-always snap-center;
+}
+
+.card-image {
+  @apply object-cover object-center w-full rounded-t-lg cursor-pointer hover:scale-105 hover:duration-1000;
+}
+
+.card-image:hover {
+  filter: grayscale(100%);
+}
+
+.input {
+  @apply placeholder:text-zinc-500 w-full px-4 py-4 text-sm font-medium border border-transparent text-white bg-zinc-900/50 focus:border-zinc-800 focus:ring-0;
+}
+
+.input-secondary {
+  @apply placeholder:text-zinc-500 w-full px-4 py-4 text-sm font-medium border border-transparent  text-white bg-black focus:outline-none focus:ring-1 focus:ring-zinc-700 focus:ring-opacity-50;
+}
+
+.input-mini {
+  @apply placeholder:text-zinc-500 w-full px-3 py-1.5 text-xs font-medium text-white bg-zinc-900/50 border border-transparent focus:border-zinc-800 focus:ring-0;
+}
+
+.input-mini-secondary {
+  @apply placeholder:text-zinc-500 w-full px-3 py-1.5 text-xs font-medium bg-black dark:border-zinc-600 text-white dark:bg-zinc-900/50 focus:ring-0 dark:focus:ring-0;
+}
+
+.input-small {
+  @apply placeholder:text-zinc-500 w-full px-4 h-10 text-sm font-medium text-white bg-zinc-900/50 border border-transparent focus:border-zinc-800 focus:ring-0 focus:outline-none;
+}
+
+.input-icon-left {
+  @apply placeholder:text-zinc-500 w-full pl-8 px-4 py-2.5 text-sm font-medium border-transparent border text-white bg-zinc-900/50 focus:border-zinc-800 focus:ring-0;
+}
+
+.input-icon-left-secondary {
+  @apply placeholder:text-zinc-500 w-full pl-8 px-4 py-2.5 text-sm font-medium bg-black dark:border-zinc-600 dark:text-white dark:bg-zinc-900/50 focus:ring-0 dark:focus:ring-0;
+}
+
+.input-select {
+  @apply placeholder:text-zinc-500 w-full px-4 py-4 text-sm font-medium border border-transparent text-white bg-zinc-900/50 focus:border-zinc-800 focus:ring-0 text-left rounded-xl;
+}
+
+.input-select-secondary {
+  @apply placeholder:text-zinc-500 w-full px-4 py-4 text-sm font-medium border border-transparent text-white bg-black focus:border-zinc-600 focus:ring-0 text-left rounded-xl;
+}
+
+.formly-field-wrapper {
+  @apply space-y-2 rounded-xl mb-4;
+}
+
+.formly-field-wrapper-flat {
+  @apply space-y-2 mb-4;
+}
+
+.input-date {
+  @apply placeholder:text-zinc-500 w-full px-4 py-2.5 text-sm font-medium border-none text-white bg-zinc-900 focus:ring-1 focus:ring-zinc-800;
+  background-color: transparent !important;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.input::placeholder,
+.input-secondary::placeholder,
+.input-mini::placeholder,
+.input-mini-secondary::placeholder,
+.input-icon-left::placeholder,
+.input-icon-left-secondary::placeholder,
+.input-select::placeholder,
+.input-date::placeholder {
+  @apply text-zinc-500;
+}
+
+.input-date::-webkit-calendar-picker-indicator {
+  filter: invert(1);
+}
+
+.label-input {
+  @apply flex gap-2 mt-2 mb-1 text-sm font-extrabold text-white tracking-wide uppercase;
+}
+
+.formly-label {
+  @apply text-[12px] font-bold uppercase tracking-[0.2em] text-white px-1 flex items-center gap-2 mb-0;
+}
+
+.formly-label::after {
+  content: '';
+  @apply flex-1 h-px bg-zinc-800/30;
+}
+
+.checkbox {
+  @apply w-4 h-4 text-white bg-zinc-900/50 rounded focus:ring-2 focus:ring-zinc-700 focus:ring-opacity-50 focus:outline-none cursor-pointer transition-colors duration-200;
+}
+
+.checkbox-secondary {
+  @apply w-4 h-4 text-white bg-black rounded focus:ring-2 focus:ring-zinc-700 focus:ring-opacity-50 focus:outline-none cursor-pointer transition-colors duration-200;
+}
+
+.checkbox:checked {
+  @apply bg-white border-white;
+}
+
+.checkbox:checked::before {
+  content: '✓';
+  @apply flex items-center justify-center w-full h-full text-black text-sm font-bold;
+}
+
+.badge {
+  @apply flex items-center gap-2 px-2 py-2 text-sm text-white border border-transparent rounded-xl bg-zinc-900/50 hover:bg-zinc-700 hover:cursor-pointer;
+}
+
+.badge-secondary {
+  @apply flex items-center gap-2 px-2 py-2 text-sm text-white border border-transparent rounded-xl bg-black hover:bg-zinc-700 hover:cursor-pointer;
+}
+
+.badge-mini {
+  @apply flex items-center gap-2 px-2 py-1 text-sm text-white border border-transparent rounded-xl bg-zinc-900/50 hover:bg-zinc-700 hover:cursor-pointer;
+}
+
+.badge-mini-secondary {
+  @apply flex items-center gap-2 px-2 py-1 text-sm text-white border border-transparent rounded-xl bg-black hover:bg-zinc-700 hover:cursor-pointer;
+}
+
+.button {
+  @apply flex font-semibold items-center justify-center w-full gap-2 px-3 py-2.5 mb-1 text-sm text-white bg-zinc-900/50 rounded-xl border-transparent border disabled:bg-zinc-900/50 duration-500 hover:opacity-70;
+}
+
+.button-interaction {
+  @apply transition cursor-pointer hover:opacity-70 active:scale-95;
+}
+
+.button-press-soft {
+  transition: transform 0.2s ease;
+}
+
+.button-press-soft:active {
+  transform: scale(0.98);
+}
+
+.button-secondary {
+  @apply px-3 py-2 mb-2 mr-2 text-sm duration-300 bg-black border border-transparent rounded-xl cursor-pointer min-w-fit hover:bg-zinc-600 hover:text-white;
+}
+
+.button-between {
+  @apply flex font-semibold items-center justify-between w-full gap-2 px-3 py-2.5 mb-1 text-sm text-white bg-zinc-900/50 rounded-xl border-transparent border disabled:bg-zinc-900/50 duration-500 hover:opacity-70;
+}
+
+.button-between-secondary {
+  @apply flex font-semibold items-center justify-between w-full gap-2 px-3 py-2.5 mb-1 text-sm text-white bg-black rounded-xl border-transparent border disabled:bg-zinc-900/50 duration-500 hover:opacity-70;
+}
+
+.button-badge {
+  @apply px-3 py-2 mb-2 mr-2 text-sm duration-300 border border-transparent rounded-xl cursor-pointer min-w-fit bg-zinc-900/50 hover:bg-zinc-600 hover:text-white;
+}
+
+.button-badge-secondary {
+  @apply px-3 py-2 mb-2 mr-2 text-sm duration-300 bg-black rounded-xl cursor-pointer min-w-fit hover:bg-zinc-700 hover:text-white;
+}
+
+.button-upload-image {
+  @apply flex items-center justify-between w-full px-4 gap-2 py-2.5 mb-1 text-sm text-white bg-zinc-900/50 rounded-xl disabled:bg-zinc-900/50 hover:bg-zinc-700 duration-500;
+}
+
+.button-upload-image-secondary {
+  @apply flex items-center justify-between w-full px-4 gap-2 py-2.5 mb-1 text-sm text-white bg-black rounded-xl disabled:bg-black hover:bg-zinc-700 duration-500;
+}
+
+.filter-grayscale {
+  filter: grayscale(100%);
+}
+
+.filter-none {
+  filter: grayscale(0%);
+}
+
+.custom-opacity {
+  overflow: hidden;
+}
+
+.custom-opacity img {
+  transition:
+    transform 0.6s cubic-bezier(0.075, 0.82, 0.165, 1),
+    opacity 0.3s ease-in-out;
+}
+
+.custom-opacity .absolute {
+  transition: opacity 0.3s ease-in-out;
+}
+
+.custom-opacity:hover img {
+  transform: scale(1.1);
+  opacity: 1;
+}
+
+.custom-opacity:hover .absolute {
+  opacity: 0;
+}
+
+.scrollbar-hidden {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollbar-hidden::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.navbar-no-active {
+  font-weight: 200;
+}
+
+.navbar-active {
+  font-weight: 900;
+}
+
+.boundary {
+  height: 100vh;
+  position: fixed;
+  width: 100%;
+  max-width: 100%;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s;
+}
+
+.cc-window {
+  font-family: 'Titillium Web', sans-serif;
+}
+
+/* ─── @kolkov/angular-editor theme overrides ───────────────────────────── */
+
+.angular-editor {
+  --ae-gap: 5px;
+  --ae-text-area-border: 1px solid rgba(63, 63, 70, 0.5);
+  --ae-text-area-border-radius: 0.75rem;
+  --ae-focus-outline-color: rgba(113, 113, 122, 0.4);
+  --ae-toolbar-padding: 4px;
+  --ae-toolbar-bg-color: rgba(24, 24, 27, 0.8);
+  --ae-toolbar-border-radius: 1px solid rgba(63, 63, 70, 0.5);
+  --ae-button-bg-color: rgba(39, 39, 42, 0.6);
+  --ae-button-border: 1px solid rgba(63, 63, 70, 0.5);
+  --ae-button-radius: 0.5rem;
+  --ae-button-hover-bg-color: rgba(63, 63, 70, 0.8);
+  --ae-button-active-bg-color: rgba(113, 113, 122, 0.4);
+  --ae-button-active-hover-bg-color: rgba(82, 82, 91, 0.6);
+  --ae-button-disabled-bg-color: rgba(39, 39, 42, 0.3);
+  --ae-picker-label-color: rgba(24, 24, 27, 0.95);
+  --ae-picker-icon-bg-color: rgba(24, 24, 27, 0.95);
+  --ae-picker-option-bg-color: rgba(24, 24, 27, 0.98);
+  --ae-picker-option-active-bg-color: rgba(63, 63, 70, 0.8);
+  --ae-picker-option-focused-bg-color: rgba(82, 82, 91, 0.6);
+  --ae-picker-option-hover-bg-color: rgba(63, 63, 70, 0.7);
+}
+
+.angular-editor
+  .angular-editor-wrapper
+  .angular-editor-textarea {
+  background-color: rgba(24, 24, 27, 0.5);
+  color: #e4e4e7;
+  min-height: 150px;
+}
+.angular-editor
+  .angular-editor-wrapper
+  .angular-editor-textarea:focus {
+  border-color: rgba(113, 113, 122, 0.5);
+}
+.angular-editor
+  .angular-editor-wrapper
+  .angular-editor-placeholder {
+  color: rgba(113, 113, 122, 0.7);
+}
+.angular-editor .angular-editor-toolbar {
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+.angular-editor.bottom .angular-editor-toolbar {
+  border-radius: 0 0 0.75rem 0.75rem;
+}
+.angular-editor .angular-editor-toolbar .angular-editor-button {
+  color: #e4e4e7;
+  width: 2.125rem;
+  height: 2.125rem;
+}
+.angular-editor
+  .angular-editor-toolbar
+  .angular-editor-button.active {
+  background-color: rgba(113, 113, 122, 0.5);
+}
+.angular-editor
+  .angular-editor-toolbar
+  .angular-editor-button:hover:not(:disabled) {
+  background-color: rgba(82, 82, 91, 0.6);
+}
+.angular-editor .ae-picker {
+  color: #e4e4e7;
+}
+.angular-editor .ae-picker .ae-picker-label {
+  background-color: rgba(39, 39, 42, 0.6);
+  border: 1px solid rgba(63, 63, 70, 0.5);
+  border-radius: 0.5rem;
+  color: #e4e4e7;
+  font-size: 0.75rem;
+  height: 2.125rem;
+}
+.angular-editor .ae-picker .ae-picker-options {
+  border: 1px solid rgba(63, 63, 70, 0.5);
+  border-radius: 0.5rem;
+  z-index: 50;
+}
+.angular-editor .ae-picker .ae-picker-options .ae-picker-item {
+  color: #e4e4e7;
+  font-size: 0.75rem;
+}
+.angular-editor
+  .ae-picker
+  .ae-picker-options
+  .ae-picker-item:hover {
+  background-color: rgba(82, 82, 91, 0.6);
+}
+.angular-editor
+  .ae-picker
+  .ae-picker-options
+  .ae-picker-item.focused {
+  background-color: rgba(82, 82, 91, 0.5);
+}
+.angular-editor .ae-picker .ae-picker-label svg {
+  fill: #e4e4e7;
+}
+.angular-editor .angular-editor-toolbar-set svg {
+  fill: #e4e4e7;
+}
+
+/* Offset sticky para elementos que deben quedar pegados bajo el navbar.
+   --navbar-h lo define app-page-layout midiendo la altura real del navbar. */
+.sticky-under-navbar {
+  top: calc(var(--navbar-h, 4rem) + env(safe-area-inset-top, 0px));
+}