@retalia/pos-components 0.0.1

package/README.md

@@ -0,0 +1,5 @@
+# @retalia/pos-components
+
+Presentational Adaptive POS components. Install with `npm i @retalia/pos-components`.
+
+The git repo README covers how to build and work on the library locally.

package/fesm2022/retalia-pos-components.mjs

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+
+class PosHelloWorld {
+    label = input('Hello World library integration successful.', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    acknowledge = output();
+    confirmed = signal(false, ...(ngDevMode ? [{ debugName: "confirmed" }] : /* istanbul ignore next */ []));
+    onAcknowledge() {
+        this.confirmed.set(true);
+        this.acknowledge.emit({ type: 'helloWorld.acknowledge' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosHelloWorld, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosHelloWorld, isStandalone: true, selector: "pos-hello-world", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { acknowledge: "acknowledge" }, ngImport: i0, template: `
+    <article class="card">
+      <p class="kicker">@retalia/pos-components</p>
+      <h1>{{ label() }}</h1>
+      <p class="lede">
+        If this card rendered, the host installed the package and can consume
+        presentational POS components.
+      </p>
+
+      @if (confirmed()) {
+        <p class="status" role="status" aria-live="polite">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="9.1" stroke="currentColor" stroke-width="1.8" />
+            <path
+              d="M7.5 12.4 10.6 15.4 16.5 8.8"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          Acknowledged
+        </p>
+      } @else {
+        <button type="button" (click)="onAcknowledge()">Acknowledge</button>
+      }
+    </article>
+  `, isInline: true, styles: [":host{display:block;color:#1a1a1a;font-family:Chakra Petch,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;background:#fff;border:1px solid #ececf0;border-radius:12px;box-shadow:0 1px 3px #0000000d}.kicker{margin:0;color:#7b2ff2;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}h1{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}.lede{margin:0 0 8px;color:#666a70}button,.status{min-height:52px;min-width:160px;margin:0;padding:0 18px;border-radius:8px;font:inherit;font-weight:600}button{border:0;background:#16dbcc;color:#1a1a1a;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #7b2ff2;outline-offset:2px}.status{display:inline-flex;align-items:center;gap:8px;background:#e4fbf5;color:#0ca678}.status svg{flex-shrink:0}@media(prefers-reduced-motion:reduce){button{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosHelloWorld, decorators: [{
+            type: Component,
+            args: [{ selector: 'pos-hello-world', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <article class="card">
+      <p class="kicker">@retalia/pos-components</p>
+      <h1>{{ label() }}</h1>
+      <p class="lede">
+        If this card rendered, the host installed the package and can consume
+        presentational POS components.
+      </p>
+
+      @if (confirmed()) {
+        <p class="status" role="status" aria-live="polite">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="9.1" stroke="currentColor" stroke-width="1.8" />
+            <path
+              d="M7.5 12.4 10.6 15.4 16.5 8.8"
+              stroke="currentColor"
+              stroke-width="1.8"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          Acknowledged
+        </p>
+      } @else {
+        <button type="button" (click)="onAcknowledge()">Acknowledge</button>
+      }
+    </article>
+  `, styles: [":host{display:block;color:#1a1a1a;font-family:Chakra Petch,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.5}.card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;background:#fff;border:1px solid #ececf0;border-radius:12px;box-shadow:0 1px 3px #0000000d}.kicker{margin:0;color:#7b2ff2;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}h1{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25}.lede{margin:0 0 8px;color:#666a70}button,.status{min-height:52px;min-width:160px;margin:0;padding:0 18px;border-radius:8px;font:inherit;font-weight:600}button{border:0;background:#16dbcc;color:#1a1a1a;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #7b2ff2;outline-offset:2px}.status{display:inline-flex;align-items:center;gap:8px;background:#e4fbf5;color:#0ca678}.status svg{flex-shrink:0}@media(prefers-reduced-motion:reduce){button{transition:none}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], acknowledge: [{ type: i0.Output, args: ["acknowledge"] }] } });
+
+/*
+ * Public API Surface of @retalia/pos-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PosHelloWorld };
+//# sourceMappingURL=retalia-pos-components.mjs.map

package/fesm2022/retalia-pos-components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"retalia-pos-components.mjs","sources":["../../../projects/pos-components/src/lib/hello-world/pos-hello-world.ts","../../../projects/pos-components/src/public-api.ts","../../../projects/pos-components/src/retalia-pos-components.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, output, signal } from '@angular/core';\n\nexport interface HelloWorldIntent {\n  readonly type: 'helloWorld.acknowledge';\n}\n\n@Component({\n  selector: 'pos-hello-world',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <article class=\"card\">\n      <p class=\"kicker\">@retalia/pos-components</p>\n      <h1>{{ label() }}</h1>\n      <p class=\"lede\">\n        If this card rendered, the host installed the package and can consume\n        presentational POS components.\n      </p>\n\n      @if (confirmed()) {\n        <p class=\"status\" role=\"status\" aria-live=\"polite\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"9.1\" stroke=\"currentColor\" stroke-width=\"1.8\" />\n            <path\n              d=\"M7.5 12.4 10.6 15.4 16.5 8.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n          Acknowledged\n        </p>\n      } @else {\n        <button type=\"button\" (click)=\"onAcknowledge()\">Acknowledge</button>\n      }\n    </article>\n  `,\n  styles: `\n    :host {\n      display: block;\n      color: #1a1a1a;\n      font-family: 'Chakra Petch', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .card {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 24px;\n      background: #fff;\n      border: 1px solid #ececf0;\n      border-radius: 12px;\n      box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);\n    }\n\n    .kicker {\n      margin: 0;\n      color: #7b2ff2;\n      font-size: 12px;\n      font-weight: 600;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n    }\n\n    h1 {\n      margin: 0;\n      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\n      font-size: 22px;\n      font-weight: 700;\n      letter-spacing: -0.02em;\n      line-height: 1.25;\n    }\n\n    .lede {\n      margin: 0 0 8px;\n      color: #666a70;\n    }\n\n    button,\n    .status {\n      min-height: 52px;\n      min-width: 160px;\n      margin: 0;\n      padding: 0 18px;\n      border-radius: 8px;\n      font: inherit;\n      font-weight: 600;\n    }\n\n    button {\n      border: 0;\n      background: #16dbcc;\n      color: #1a1a1a;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    button:focus-visible {\n      outline: 3px solid #7b2ff2;\n      outline-offset: 2px;\n    }\n\n    .status {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      background: #e4fbf5;\n      color: #0ca678;\n    }\n\n    .status svg {\n      flex-shrink: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      button {\n        transition: none;\n      }\n    }\n  `,\n})\nexport class PosHelloWorld {\n  readonly label = input('Hello World library integration successful.');\n  readonly acknowledge = output<HelloWorldIntent>();\n\n  protected readonly confirmed = signal(false);\n\n  protected onAcknowledge(): void {\n    this.confirmed.set(true);\n    this.acknowledge.emit({ type: 'helloWorld.acknowledge' });\n  }\n}\n","/*\n * Public API Surface of @retalia/pos-components\n */\n\nexport { PosHelloWorld } from './lib/hello-world/pos-hello-world';\nexport type { HelloWorldIntent } from './lib/hello-world/pos-hello-world';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAmIa,aAAa,CAAA;AACf,IAAA,KAAK,GAAG,KAAK,CAAC,6CAA6C,4EAAC;IAC5D,WAAW,GAAG,MAAM,EAAoB;AAE9B,IAAA,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC;IAElC,aAAa,GAAA;AACrB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,wBAAwB,EAAE,CAAC;IAC3D;wGATW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA1Hd;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAwFU,aAAa,EAAA,UAAA,EAAA,CAAA;kBA7HzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,eAAA,EACV,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,giCAAA,CAAA,EAAA;;;AC3CH;;AAEG;;ACFH;;AAEG;;"}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@retalia/pos-components",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/retalia-pos-components.mjs",
+  "typings": "types/retalia-pos-components.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/retalia-pos-components.d.ts",
+      "default": "./fesm2022/retalia-pos-components.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/retalia-pos-components.d.ts

@@ -0,0 +1,16 @@
+import * as _angular_core from '@angular/core';
+
+interface HelloWorldIntent {
+    readonly type: 'helloWorld.acknowledge';
+}
+declare class PosHelloWorld {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly acknowledge: _angular_core.OutputEmitterRef<HelloWorldIntent>;
+    protected readonly confirmed: _angular_core.WritableSignal<boolean>;
+    protected onAcknowledge(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosHelloWorld, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosHelloWorld, "pos-hello-world", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; }, { "acknowledge": "acknowledge"; }, never, never, true, never>;
+}
+
+export { PosHelloWorld };
+export type { HelloWorldIntent };