@lit-roa/custom-header 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,21 @@
-# Temporary Holding Version
+# @lit-roa/custom-header
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+TODO: describe el componente.
+
+```bash
+npm install @lit-roa/custom-header
+```
+
+```ts
+import '@lit-roa/custom-header';
+```
+
+```html
+<lr-custom-header></lr-custom-header>
+```
+
+## Desarrollo
+
+```bash
+npm run dev -w @lit-roa/custom-header
+```

package/dist/custom-header.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * TODO: describe el componente.
+ */
+export declare class LrCustomHeader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    titulo: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lr-custom-header': LrCustomHeader;
+    }
+}
+//# sourceMappingURL=custom-header.d.ts.map

package/dist/custom-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-header.d.ts","sourceRoot":"","sources":["../src/custom-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;GAEG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAoCpB;IAEU,MAAM,SAAsB;IAE/B,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/custom-header.js

@@ -0,0 +1,78 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { estilosBase, iconoMenu2, tokens, iconoUser, iconoShoppingCart } from '@lit-roa/base';
+/**
+ * TODO: describe el componente.
+ */
+let LrCustomHeader = class LrCustomHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.titulo = 'lr-custom-header';
+    }
+    static { this.styles = [
+        tokens,
+        estilosBase,
+        css `
+      :host {
+        display: block;
+      }
+
+      .bg-header {
+        background-color: #292929;
+        color: white;
+        padding: var(--_espacio);
+        height: 80px;
+      }
+
+      .d-flex {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .me-2 {
+        margin-right: var(--_espacio);
+      }
+
+      .bg-header svg {
+        font-size: 1.5rem;
+      }
+
+      .btn {
+        background-color: transparent;
+        border: none;
+        color: white;
+        cursor: pointer;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="bg-header d-flex">
+        <span class="btn">${iconoMenu2}</span>
+        <div class="d-flex">
+          <button class="btn me-2">Productos</button>
+          <span class="btn me-2">${iconoUser}</span>
+          <div class="btn d-flex">
+            <span>${iconoShoppingCart}</span>
+            <span>0</span>
+          </div>
+        </div>
+      </div>
+      `;
+    }
+};
+__decorate([
+    property()
+], LrCustomHeader.prototype, "titulo", void 0);
+LrCustomHeader = __decorate([
+    customElement('lr-custom-header')
+], LrCustomHeader);
+export { LrCustomHeader };
+//# sourceMappingURL=custom-header.js.map

package/dist/custom-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-header.js","sourceRoot":"","sources":["../src/custom-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAE9F;;GAEG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAuCO,WAAM,GAAG,kBAAkB,CAAC;IAiB1C,CAAC;aAvDiB,WAAM,GAAG;QACvB,MAAM;QACN,WAAW;QACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AApCqB,CAoCpB;IAIO,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,UAAU;;;mCAGH,SAAS;;oBAExB,iBAAiB;;;;;OAK9B,CAAC;IACN,CAAC;;AAhBW;IAAX,QAAQ,EAAE;8CAA6B;AAvC7B,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwD1B"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { LrCustomHeader } from './custom-header.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { LrCustomHeader } from './custom-header.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,30 @@
 {
   "name": "@lit-roa/custom-header",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "./dist/index.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b"
+  },
+  "dependencies": {
+    "@lit-roa/base": "^0.2.0",
+    "lit": "^3.3.3"
+  },
+  "license": "MIT"
+}

package/src/custom-header.ts

@@ -0,0 +1,71 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { estilosBase, iconoMenu2, tokens, iconoUser, iconoShoppingCart } from '@lit-roa/base';
+
+/**
+ * TODO: describe el componente.
+ */
+@customElement('lr-custom-header')
+export class LrCustomHeader extends LitElement {
+  static override styles = [
+    tokens,
+    estilosBase,
+    css`
+      :host {
+        display: block;
+      }
+
+      .bg-header {
+        background-color: #292929;
+        color: white;
+        padding: var(--_espacio);
+        height: 80px;
+      }
+
+      .d-flex {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .me-2 {
+        margin-right: var(--_espacio);
+      }
+
+      .bg-header svg {
+        font-size: 1.5rem;
+      }
+
+      .btn {
+        background-color: transparent;
+        border: none;
+        color: white;
+        cursor: pointer;
+      }
+    `,
+  ];
+
+  @property() titulo = 'lr-custom-header';
+
+  override render() {
+    return html`
+      <div class="bg-header d-flex">
+        <span class="btn">${iconoMenu2}</span>
+        <div class="d-flex">
+          <button class="btn me-2">Productos</button>
+          <span class="btn me-2">${iconoUser}</span>
+          <div class="btn d-flex">
+            <span>${iconoShoppingCart}</span>
+            <span>0</span>
+          </div>
+        </div>
+      </div>
+      `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lr-custom-header': LrCustomHeader;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { LrCustomHeader } from './custom-header.js';