@uxland/primary-shell 7.47.6 → 7.49.0

package/dist/primary/shell/src/locales.d.ts

@@ -47,6 +47,7 @@ export declare const locales: {
                 title: string;
                 actions: {
                     cancel: string;
+                    close: string;
                     import: string;
                 };
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.47.6",
+  "version": "7.49.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",

package/src/api/import-data-manager/component/styles.css

@@ -9,28 +9,31 @@
   overflow: hidden;
 }
 
-/* .header {
-  display: flex;
-  flex-direction: row;
+/* Three columns so the title is centred on the modal, not on the space left
+   over by the close button. */
+.header {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
-  text-align: center;
   color: black;
   padding: var(--dss-spacing-sm);
+}
 
-  .title {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-  }
-} */
+.header__title {
+  grid-column: 2;
+  text-align: center;
+}
+
+.header__close {
+  grid-column: 3;
+  justify-self: end;
+}
 
 .content{
   display: grid;
   flex: 1;
   min-height: 0;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
+  grid-template-columns: 50% 50%;
   padding: 16px;
 }
 
@@ -43,42 +46,32 @@
 .content primaria-region > div {
   width: 100%;
   height: 100%;
-  border: 1px solid var(--color-neutral-200);
   border-radius: 8px;
-  padding: 16px;
+  padding: 0 16px;
   box-sizing: border-box;
 }
 
-/* Right column: stacks plugin cards and scrolls as a whole. */
-.content > primaria-region[name="import-data-region"] > div {
-  overflow-y: auto;
-}
-
-/* Left column: vertical stack of multiple views with a gap. The last view
-   takes the remaining space and handles its own scroll; preceding views
-   keep their natural height. */
-.content > primaria-region[name="import-data-activity-history-region"] > div {
+/* Both columns are a vertical stack of injected views, 16px apart, that scrolls
+   as a whole. Each view keeps its natural height and bounds its own inner
+   scroll, and must not shrink — otherwise the column squeezes the views instead
+   of scrolling. */
+.content > primaria-region > div {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  overflow: hidden;
+  overflow-y: auto;
 }
 
-.content > primaria-region[name="import-data-activity-history-region"] > div > * {
+.content > primaria-region > div > * {
   flex-shrink: 0;
 }
 
-.content > primaria-region[name="import-data-activity-history-region"] > div > *:last-child {
-  flex: 1;
-  min-height: 0;
-}
-
 .footer {
   display: flex;
   flex-direction: row;
   align-items: center;
   background: white;
-  justify-content: end;
+  justify-content: center;
   gap: 12px;
   height: 56px;
   border-top: 1px solid var(--color-neutral-100);

package/src/api/import-data-manager/component/template.ts

@@ -6,6 +6,21 @@ import { ImportDataManagerModal } from "./component";
 export const template = (props: ImportDataManagerModal) => {
   return html`
     <div class="container">
+      <div class="header">
+        <dss-typography class="header__title" tag="h2" variant="headline-4">
+          ${translate("importDataManager.title")}
+        </dss-typography>
+        <dss-icon-button
+          class="header__close"
+          icon="close"
+          size="lg"
+          variant="neutral"
+          label="${translate("importDataManager.actions.close")}"
+          @onClick="${() => {
+            props.cancel();
+          }}"
+        ></dss-icon-button>
+      </div>
       <div class="content">
         <primaria-region name="${shellApi.regionManager.regions.shell.importDataActivityHistory}"></primaria-region>
         <primaria-region name="${shellApi.regionManager.regions.shell.importData}"></primaria-region>
@@ -20,6 +35,7 @@ export const template = (props: ImportDataManagerModal) => {
           variant="secondary"
         ></dss-button>
         <dss-button
+          icon="add_circle"
           label="${translate("importDataManager.actions.import")}"
           @click="${() => {
             props._accept();

package/src/locales.ts

@@ -65,6 +65,7 @@ export const locales = {
         title: "Importar dades",
         actions: {
           cancel: "Cancel·lar",
+          close: "Tancar",
           import: "Importar dades",
         },
       },

package/dist/component-CQxI1o5p.js

@@ -1,52 +0,0 @@
-import { s, u as d, k as l, h as p, r as m, b as g, t as h } from "./index-DSO8ViDu.js";
-const v = ".container{background-color:#fff;display:flex;flex-direction:column;min-width:500px;width:95vw;height:95vh;border-radius:var(--dss-radius-sm);overflow:hidden}.content{display:grid;flex:1;min-height:0;grid-template-columns:1fr 1fr;gap:16px;padding:16px}.content>primaria-region{width:100%;height:100%;min-height:0}.content primaria-region>div{width:100%;height:100%;border:1px solid var(--color-neutral-200);border-radius:8px;padding:16px;box-sizing:border-box}.content>primaria-region[name=import-data-region]>div{overflow-y:auto}.content>primaria-region[name=import-data-activity-history-region]>div{display:flex;flex-direction:column;gap:16px;overflow:hidden}.content>primaria-region[name=import-data-activity-history-region]>div>*{flex-shrink:0}.content>primaria-region[name=import-data-activity-history-region]>div>*:last-child{flex:1;min-height:0}.footer{display:flex;flex-direction:row;align-items:center;background:#fff;justify-content:end;gap:12px;height:56px;border-top:1px solid var(--color-neutral-100);padding:var(--dss-spacing-sm)}", f = (i) => l`
-    <div class="container">
-      <div class="content">
-        <primaria-region name="${s.regionManager.regions.shell.importDataActivityHistory}"></primaria-region>
-        <primaria-region name="${s.regionManager.regions.shell.importData}"></primaria-region>
-      </div>
-      <div class="footer">
-        <dss-button
-          label="${d("importDataManager.actions.cancel")}"
-          @click="${() => {
-  i.cancel();
-}}"
-          size="md"
-          variant="secondary"
-        ></dss-button>
-        <dss-button
-          label="${d("importDataManager.actions.import")}"
-          @click="${() => {
-  i._accept();
-}}"
-          size="md"
-          variant="primary"
-        ></dss-button>
-      </div>
-    </div>
-  `;
-var u = Object.getOwnPropertyDescriptor, x = (i, e, c, n) => {
-  for (var r = n > 1 ? void 0 : n ? u(e, c) : e, a = i.length - 1, o; a >= 0; a--)
-    (o = i[a]) && (r = o(r) || r);
-  return r;
-};
-let t = class extends p {
-  constructor() {
-    super(...arguments), this._accept = () => {
-      this.confirm();
-    };
-  }
-  render() {
-    return l`${f(this)}`;
-  }
-};
-t.styles = g`
-    ${m(v)}
-  `;
-t = x([
-  h("import-data-manager-modal")
-], t);
-export {
-  t as ImportDataManagerModal
-};
-//# sourceMappingURL=component-CQxI1o5p.js.map

package/dist/component-CQxI1o5p.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component-CQxI1o5p.js","sources":["../src/api/import-data-manager/component/template.ts","../src/api/import-data-manager/component/component.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { translate } from \"../../../locales\";\nimport { shellApi } from \"../../api\";\nimport { ImportDataManagerModal } from \"./component\";\n\nexport const template = (props: ImportDataManagerModal) => {\n  return html`\n    <div class=\"container\">\n      <div class=\"content\">\n        <primaria-region name=\"${shellApi.regionManager.regions.shell.importDataActivityHistory}\"></primaria-region>\n        <primaria-region name=\"${shellApi.regionManager.regions.shell.importData}\"></primaria-region>\n      </div>\n      <div class=\"footer\">\n        <dss-button\n          label=\"${translate(\"importDataManager.actions.cancel\")}\"\n          @click=\"${() => {\n            props.cancel();\n          }}\"\n          size=\"md\"\n          variant=\"secondary\"\n        ></dss-button>\n        <dss-button\n          label=\"${translate(\"importDataManager.actions.import\")}\"\n          @click=\"${() => {\n            props._accept();\n          }}\"\n          size=\"md\"\n          variant=\"primary\"\n        ></dss-button>\n      </div>\n    </div>\n  `;\n};\n","import { LitElement, css, html, unsafeCSS } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { ConfirmationContentProps } from \"../../interaction-service\";\nimport styles from \"./styles.css?inline\";\nimport { template } from \"./template\";\n\n@customElement(\"import-data-manager-modal\")\nexport class ImportDataManagerModal extends LitElement implements ConfirmationContentProps<undefined, undefined> {\n  data: undefined;\n  setResult: (result: undefined) => void;\n  setIsValid: (isValid: boolean) => void;\n  confirm: () => void;\n  // Injectat pel servei d'interacció igual que la resta; faltava des que es va afegir a la\n  // interfície.\n  confirmResult: (result: undefined) => void;\n  cancel: () => void;\n\n  render() {\n    return html`${template(this)}`;\n  }\n\n  static styles = css`\n    ${unsafeCSS(styles)}\n  `;\n\n  _accept = () => {\n    this.confirm();\n  };\n}\n"],"names":["template","props","html","shellApi","translate","ImportDataManagerModal","LitElement","css","unsafeCSS","styles","__decorateClass","customElement"],"mappings":";kiCAKaA,IAAW,CAACC,MAChBC;AAAAA;AAAAA;AAAAA,iCAGwBC,EAAS,cAAc,QAAQ,MAAM,yBAAyB;AAAA,iCAC9DA,EAAS,cAAc,QAAQ,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA,mBAI7DC,EAAU,kCAAkC,CAAC;AAAA,oBAC5C,MAAM;AACd,EAAAH,EAAM,OAAA;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKQG,EAAU,kCAAkC,CAAC;AAAA,oBAC5C,MAAM;AACd,EAAAH,EAAM,QAAA;AACR,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AClBJ,IAAMI,IAAN,cAAqCC,EAAqE;AAAA,EAA1G,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBL,KAAA,UAAU,MAAM;AACd,WAAK,QAAA;AAAA,IACP;AAAA,EAAA;AAAA,EAVA,SAAS;AACP,WAAOJ,IAAOF,EAAS,IAAI,CAAC;AAAA,EAC9B;AASF;AArBaK,EAcJ,SAASE;AAAAA,MACZC,EAAUC,CAAM,CAAC;AAAA;AAfVJ,IAANK,EAAA;AAAA,EADNC,EAAc,2BAA2B;AAAA,GAC7BN,CAAA;"}