@tailng-ui/components 0.14.0 → 0.16.0

package/src/lib/layout/grid/tng-grid.component.js

@@ -1,16 +1,113 @@
 import { __decorate } from "tslib";
-import { Component, input } from '@angular/core';
-import { TngGrid as TngGridPrimitive } from '@tailng-ui/primitives';
+import { Component } from '@angular/core';
+import { TngGrid as TngGridPrimitive, TngGridCell as TngGridCellPrimitive, TngGridRow as TngGridRowPrimitive, } from '@tailng-ui/primitives';
 let TngGridComponent = class TngGridComponent {
-    ariaLabel = input('Grid');
 };
 TngGridComponent = __decorate([
     Component({
         selector: 'tng-grid',
-        imports: [TngGridPrimitive],
+        hostDirectives: [
+            {
+                directive: TngGridPrimitive,
+                inputs: [
+                    'ariaLabel',
+                    'ariaColcount',
+                    'ariaRowcount',
+                    'dir',
+                    'focusCol',
+                    'focusRow',
+                    'selectionMode',
+                    'value',
+                    'defaultValue',
+                    'wrap',
+                ],
+                outputs: ['focusRowChange', 'focusColChange', 'focusChange', 'valueChange', 'cellActivate'],
+            },
+        ],
         templateUrl: './tng-grid.component.html',
         styleUrl: './tng-grid.component.css',
+        exportAs: 'tngGridComponent',
     })
 ], TngGridComponent);
 export { TngGridComponent };
+let TngGridRowComponent = class TngGridRowComponent {
+};
+TngGridRowComponent = __decorate([
+    Component({
+        selector: 'tng-grid-row',
+        hostDirectives: [TngGridRowPrimitive],
+        template: '<ng-content />',
+        styles: `
+    :host {
+      display: grid;
+      gap: var(--tng-grid-gap, 0.75rem);
+      grid-auto-columns: minmax(0, 1fr);
+      grid-auto-flow: column;
+    }
+  `,
+        exportAs: 'tngGridRowComponent',
+    })
+], TngGridRowComponent);
+export { TngGridRowComponent };
+let TngGridCellComponent = class TngGridCellComponent {
+};
+TngGridCellComponent = __decorate([
+    Component({
+        selector: 'tng-grid-cell',
+        hostDirectives: [
+            {
+                directive: TngGridCellPrimitive,
+                inputs: ['rowIndex', 'colIndex', 'rowSpan', 'colSpan', 'disabled', 'selected', 'cellRole'],
+            },
+        ],
+        template: '<ng-content />',
+        styles: `
+    :host {
+      align-items: center;
+      background: var(--tng-semantic-background-surface);
+      border: 1px solid var(--tng-semantic-border-subtle);
+      border-radius: 0.75rem;
+      color: var(--tng-semantic-foreground-primary);
+      cursor: pointer;
+      display: flex;
+      gap: 0.35rem;
+      justify-content: flex-start;
+      min-height: 3rem;
+      outline: none;
+      padding: 0.75rem 0.9rem;
+      transition:
+        border-color 160ms ease,
+        box-shadow 160ms ease,
+        transform 160ms ease;
+    }
+
+    :host([data-selected]) {
+      background: color-mix(in srgb, var(--tng-semantic-background-surface) 78%, var(--tng-semantic-color-primary) 22%);
+      border-color: color-mix(in srgb, var(--tng-semantic-border-subtle) 45%, var(--tng-semantic-color-primary) 55%);
+    }
+
+    :host([data-focus-visible]) {
+      border-color: color-mix(in srgb, var(--tng-semantic-border-subtle) 30%, var(--tng-semantic-color-primary) 70%);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--tng-semantic-color-primary) 22%, transparent);
+    }
+
+    :host([data-activated]) {
+      transform: translateY(-1px);
+    }
+
+    :host([data-disabled]) {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    :host([role='columnheader']),
+    :host([role='rowheader']) {
+      background: color-mix(in srgb, var(--tng-semantic-background-surface) 82%, var(--tng-semantic-background-base) 18%);
+      font-weight: 600;
+    }
+  `,
+        exportAs: 'tngGridCellComponent',
+    })
+], TngGridCellComponent);
+export { TngGridCellComponent };
 //# sourceMappingURL=tng-grid.component.js.map

package/src/lib/layout/grid/tng-grid.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tng-grid.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/grid/tng-grid.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAQ7D,IAAM,gBAAgB,GAAtB,MAAM,gBAAgB;IACX,SAAS,GAAG,KAAK,CAAS,MAAM,CAAC,CAAC;CACnD,CAAA;AAFY,gBAAgB;IAN5B,SAAS,CAAC;QACT,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,CAAC,gBAAgB,CAAC;QAC3B,WAAW,EAAE,2BAA2B;QACxC,QAAQ,EAAE,0BAA0B;KACrC,CAAC;GACW,gBAAgB,CAE5B","sourcesContent":["import { Component, input } from '@angular/core';\nimport { TngGrid as TngGridPrimitive } from '@tailng-ui/primitives';\n\n@Component({\n  selector: 'tng-grid',\n  imports: [TngGridPrimitive],\n  templateUrl: './tng-grid.component.html',\n  styleUrl: './tng-grid.component.css',\n})\nexport class TngGridComponent {\n  public readonly ariaLabel = input<string>('Grid');\n}\n"]}
+{"version":3,"file":"tng-grid.component.js","sourceRoot":"","sources":["../../../../../../../../libs/tailng-ui/components/src/lib/layout/grid/tng-grid.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,WAAW,IAAI,oBAAoB,EACnC,UAAU,IAAI,mBAAmB,GAClC,MAAM,uBAAuB,CAAC;AA0BxB,IAAM,gBAAgB,GAAtB,MAAM,gBAAgB;CAAG,CAAA;AAAnB,gBAAgB;IAxB5B,SAAS,CAAC;QACT,QAAQ,EAAE,UAAU;QACpB,cAAc,EAAE;YACd;gBACE,SAAS,EAAE,gBAAgB;gBAC3B,MAAM,EAAE;oBACN,WAAW;oBACX,cAAc;oBACd,cAAc;oBACd,KAAK;oBACL,UAAU;oBACV,UAAU;oBACV,eAAe;oBACf,OAAO;oBACP,cAAc;oBACd,MAAM;iBACP;gBACD,OAAO,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,CAAC;aAC5F;SACF;QACD,WAAW,EAAE,2BAA2B;QACxC,QAAQ,EAAE,0BAA0B;QACpC,QAAQ,EAAE,kBAAkB;KAC7B,CAAC;GACW,gBAAgB,CAAG;;AAgBzB,IAAM,mBAAmB,GAAzB,MAAM,mBAAmB;CAAG,CAAA;AAAtB,mBAAmB;IAd/B,SAAS,CAAC;QACT,QAAQ,EAAE,cAAc;QACxB,cAAc,EAAE,CAAC,mBAAmB,CAAC;QACrC,QAAQ,EAAE,gBAAgB;QAC1B,MAAM,EAAE;;;;;;;GAOP;QACD,QAAQ,EAAE,qBAAqB;KAChC,CAAC;GACW,mBAAmB,CAAG;;AA0D5B,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;CAAG,CAAA;AAAvB,oBAAoB;IAxDhC,SAAS,CAAC;QACT,QAAQ,EAAE,eAAe;QACzB,cAAc,EAAE;YACd;gBACE,SAAS,EAAE,oBAAoB;gBAC/B,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;aAC3F;SACF;QACD,QAAQ,EAAE,gBAAgB;QAC1B,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CP;QACD,QAAQ,EAAE,sBAAsB;KACjC,CAAC;GACW,oBAAoB,CAAG","sourcesContent":["import { Component } from '@angular/core';\nimport {\n  TngGrid as TngGridPrimitive,\n  TngGridCell as TngGridCellPrimitive,\n  TngGridRow as TngGridRowPrimitive,\n} from '@tailng-ui/primitives';\n\n@Component({\n  selector: 'tng-grid',\n  hostDirectives: [\n    {\n      directive: TngGridPrimitive,\n      inputs: [\n        'ariaLabel',\n        'ariaColcount',\n        'ariaRowcount',\n        'dir',\n        'focusCol',\n        'focusRow',\n        'selectionMode',\n        'value',\n        'defaultValue',\n        'wrap',\n      ],\n      outputs: ['focusRowChange', 'focusColChange', 'focusChange', 'valueChange', 'cellActivate'],\n    },\n  ],\n  templateUrl: './tng-grid.component.html',\n  styleUrl: './tng-grid.component.css',\n  exportAs: 'tngGridComponent',\n})\nexport class TngGridComponent {}\n\n@Component({\n  selector: 'tng-grid-row',\n  hostDirectives: [TngGridRowPrimitive],\n  template: '<ng-content />',\n  styles: `\n    :host {\n      display: grid;\n      gap: var(--tng-grid-gap, 0.75rem);\n      grid-auto-columns: minmax(0, 1fr);\n      grid-auto-flow: column;\n    }\n  `,\n  exportAs: 'tngGridRowComponent',\n})\nexport class TngGridRowComponent {}\n\n@Component({\n  selector: 'tng-grid-cell',\n  hostDirectives: [\n    {\n      directive: TngGridCellPrimitive,\n      inputs: ['rowIndex', 'colIndex', 'rowSpan', 'colSpan', 'disabled', 'selected', 'cellRole'],\n    },\n  ],\n  template: '<ng-content />',\n  styles: `\n    :host {\n      align-items: center;\n      background: var(--tng-semantic-background-surface);\n      border: 1px solid var(--tng-semantic-border-subtle);\n      border-radius: 0.75rem;\n      color: var(--tng-semantic-foreground-primary);\n      cursor: pointer;\n      display: flex;\n      gap: 0.35rem;\n      justify-content: flex-start;\n      min-height: 3rem;\n      outline: none;\n      padding: 0.75rem 0.9rem;\n      transition:\n        border-color 160ms ease,\n        box-shadow 160ms ease,\n        transform 160ms ease;\n    }\n\n    :host([data-selected]) {\n      background: color-mix(in srgb, var(--tng-semantic-background-surface) 78%, var(--tng-semantic-color-primary) 22%);\n      border-color: color-mix(in srgb, var(--tng-semantic-border-subtle) 45%, var(--tng-semantic-color-primary) 55%);\n    }\n\n    :host([data-focus-visible]) {\n      border-color: color-mix(in srgb, var(--tng-semantic-border-subtle) 30%, var(--tng-semantic-color-primary) 70%);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--tng-semantic-color-primary) 22%, transparent);\n    }\n\n    :host([data-activated]) {\n      transform: translateY(-1px);\n    }\n\n    :host([data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    :host([role='columnheader']),\n    :host([role='rowheader']) {\n      background: color-mix(in srgb, var(--tng-semantic-background-surface) 82%, var(--tng-semantic-background-base) 18%);\n      font-weight: 600;\n    }\n  `,\n  exportAs: 'tngGridCellComponent',\n})\nexport class TngGridCellComponent {}\n"]}

package/src/lib/layout/index.d.ts

@@ -8,7 +8,7 @@ export { TngCollapsibleComponent } from './collapsible/tng-collapsible.component
 export * from './drawer/tng-drawer.component';
 export { TngDrawerComponent } from './drawer/tng-drawer.component';
 export * from './grid/tng-grid.component';
-export { TngGridComponent } from './grid/tng-grid.component';
+export { TngGridCellComponent, TngGridComponent, TngGridRowComponent, } from './grid/tng-grid.component';
 export * from './separator/tng-separator.component';
 export { TngSeparatorComponent } from './separator/tng-separator.component';
 export * from './stepper/tng-stepper.component';

package/src/lib/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,qCAAqC,CAAC;AAC7C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,qCAAqC,CAAC;AAC7C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC"}

package/src/lib/layout/index.js

@@ -8,7 +8,7 @@ export { TngCollapsibleComponent } from './collapsible/tng-collapsible.component
 export * from './drawer/tng-drawer.component';
 export { TngDrawerComponent } from './drawer/tng-drawer.component';
 export * from './grid/tng-grid.component';
-export { TngGridComponent } from './grid/tng-grid.component';
+export { TngGridCellComponent, TngGridComponent, TngGridRowComponent, } from './grid/tng-grid.component';
 export * from './separator/tng-separator.component';
 export { TngSeparatorComponent } from './separator/tng-separator.component';
 export * from './stepper/tng-stepper.component';

package/src/lib/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,qCAAqC,CAAC;AAC7C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export * from './accordion/tng-accordion.component';\nexport {\n  TngAccordionComponent,\n  TngAccordionItemComponent,\n  TngAccordionTriggerComponent,\n  TngAccordionPanelComponent,\n} from './accordion/tng-accordion.component';\nexport * from './bottom-sheet/tng-bottom-sheet.component';\nexport { TngBottomSheetComponent } from './bottom-sheet/tng-bottom-sheet.component';\nexport {\n  TngCardComponent,\n  TngCardHeaderComponent,\n  TngCardTitleComponent,\n  TngCardDescriptionComponent,\n  TngCardContentComponent,\n  TngCardFooterComponent,\n  TngCardMediaComponent,\n  TngCardActionsComponent,\n  TngCardDividerComponent,\n  TngCardLinkComponent,\n} from './card/tng-card.component';\nexport * from './collapsible/tng-collapsible.component';\nexport { TngCollapsibleComponent } from './collapsible/tng-collapsible.component';\nexport * from './drawer/tng-drawer.component';\nexport { TngDrawerComponent } from './drawer/tng-drawer.component';\nexport * from './grid/tng-grid.component';\nexport { TngGridComponent } from './grid/tng-grid.component';\nexport * from './separator/tng-separator.component';\nexport { TngSeparatorComponent } from './separator/tng-separator.component';\nexport * from './stepper/tng-stepper.component';\nexport { TngStepperComponent } from './stepper/tng-stepper.component';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/tailng-ui/components/src/lib/layout/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,qCAAqC,CAAC;AAC7C,cAAc,2CAA2C,CAAC;AAC1D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,2BAA2B,EAC3B,uBAAuB,EACvB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,2BAA2B,CAAC;AACnC,cAAc,yCAAyC,CAAC;AACxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yCAAyC,CAAC;AAClF,cAAc,+BAA+B,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,cAAc,iCAAiC,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export * from './accordion/tng-accordion.component';\nexport {\n  TngAccordionComponent,\n  TngAccordionItemComponent,\n  TngAccordionTriggerComponent,\n  TngAccordionPanelComponent,\n} from './accordion/tng-accordion.component';\nexport * from './bottom-sheet/tng-bottom-sheet.component';\nexport { TngBottomSheetComponent } from './bottom-sheet/tng-bottom-sheet.component';\nexport {\n  TngCardComponent,\n  TngCardHeaderComponent,\n  TngCardTitleComponent,\n  TngCardDescriptionComponent,\n  TngCardContentComponent,\n  TngCardFooterComponent,\n  TngCardMediaComponent,\n  TngCardActionsComponent,\n  TngCardDividerComponent,\n  TngCardLinkComponent,\n} from './card/tng-card.component';\nexport * from './collapsible/tng-collapsible.component';\nexport { TngCollapsibleComponent } from './collapsible/tng-collapsible.component';\nexport * from './drawer/tng-drawer.component';\nexport { TngDrawerComponent } from './drawer/tng-drawer.component';\nexport * from './grid/tng-grid.component';\nexport {\n  TngGridCellComponent,\n  TngGridComponent,\n  TngGridRowComponent,\n} from './grid/tng-grid.component';\nexport * from './separator/tng-separator.component';\nexport { TngSeparatorComponent } from './separator/tng-separator.component';\nexport * from './stepper/tng-stepper.component';\nexport { TngStepperComponent } from './stepper/tng-stepper.component';\n"]}