@energinet/watt 0.0.1

package/core/styles/spacing/_spacing.import.scss

@@ -0,0 +1,113 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "sass:math";
+
+@use "./variables" as spaceVariables;
+
+// Inset
+@mixin inset-xs {
+  padding: var(--watt-space-xs);
+}
+
+@mixin inset-s {
+  padding: var(--watt-space-s);
+}
+
+@mixin inset-m {
+  padding: var(--watt-space-m);
+}
+
+@mixin inset-l {
+  padding: var(--watt-space-l);
+}
+
+@mixin inset-xl {
+  padding: var(--watt-space-xl);
+}
+
+// Inset Squish
+@mixin inset-squish-xs {
+  padding: math.div(spaceVariables.$watt-space-baseline, 2) var(--watt-space-xs);
+}
+
+@mixin inset-squish-s {
+  padding: var(--watt-space-xs) var(--watt-space-s);
+}
+
+@mixin inset-squish-m {
+  padding: var(--watt-space-s) var(--watt-space-m);
+}
+
+@mixin inset-squish-l {
+  padding: var(--watt-space-m) var(--watt-space-l);
+}
+
+// Inset Stretch
+@mixin inset-stretch-s {
+  padding: #{spaceVariables.$watt-space-baseline * 3} var(--watt-space-s);
+}
+
+@mixin inset-stretch-m {
+  padding: #{spaceVariables.$watt-space-baseline * 6} var(--watt-space-m);
+}
+
+// Stack
+@mixin stack-xxs {
+  margin: 0 0 math.div(spaceVariables.$watt-space-baseline, 2) 0;
+}
+
+@mixin stack-xs {
+  margin: 0 0 var(--watt-space-xs) 0;
+}
+
+@mixin stack-s {
+  margin: 0 0 var(--watt-space-s) 0;
+}
+
+@mixin stack-m {
+  margin: 0 0 var(--watt-space-m) 0;
+}
+
+@mixin stack-l {
+  margin: 0 0 var(--watt-space-l) 0;
+}
+
+@mixin stack-xl {
+  margin: 0 0 var(--watt-space-xl) 0;
+}
+
+// Inline
+@mixin inline-xxs {
+  margin: 0 math.div(spaceVariables.$watt-space-baseline, 2) 0 0;
+}
+
+@mixin inline-xs {
+  margin: 0 var(--watt-space-xs) 0 0;
+}
+
+@mixin inline-s {
+  margin: 0 var(--watt-space-s) 0 0;
+}
+
+@mixin inline-m {
+  margin: 0 var(--watt-space-m) 0 0;
+}
+
+@mixin inline-l {
+  margin: 0 var(--watt-space-l) 0 0;
+}
+
+@mixin inline-xl {
+  margin: 0 var(--watt-space-xl) 0 0;
+}

package/core/styles/spacing/_stack.scss

@@ -0,0 +1,38 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./spacing.import" as space;
+
+.watt-space-stack-xxs {
+  @include space.stack-xxs;
+}
+
+.watt-space-stack-xs {
+  @include space.stack-xs;
+}
+
+.watt-space-stack-s {
+  @include space.stack-s;
+}
+
+.watt-space-stack-m {
+  @include space.stack-m;
+}
+
+.watt-space-stack-l {
+  @include space.stack-l;
+}
+
+.watt-space-stack-xl {
+  @include space.stack-xl;
+}

package/core/styles/spacing/_variables.scss

@@ -0,0 +1,14 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+$watt-space-baseline: 0.25rem;

package/core/styles/spacing/index.scss

@@ -0,0 +1,18 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./baseline";
+
+@use "./inset";
+@use "./stack";
+@use "./inline";

package/core/styles/typography/+storybook/storybook-typography-overview.component.scss

@@ -0,0 +1,78 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "../typography.import" as typography;
+
+storybook-typography-overview {
+  display: block;
+  max-width: 880px;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+table caption {
+  text-align: left;
+}
+
+.font-size-xxl {
+  @include typography.font-size("xxl");
+}
+
+.font-size-xl {
+  @include typography.font-size("xl");
+}
+
+.font-size-l {
+  @include typography.font-size("l");
+}
+
+.font-size-m {
+  @include typography.font-size("m");
+}
+
+.font-size-s {
+  @include typography.font-size("s");
+}
+
+.font-weight-light {
+  @include typography.font-weight("light");
+}
+
+.font-weight-regular {
+  @include typography.font-weight("regular");
+}
+
+.font-weight-semi-bold {
+  @include typography.font-weight("semi-bold");
+}
+
+.font-weight-bold {
+  @include typography.font-weight("bold");
+}
+
+.small-screen {
+  h1 {
+    @include typography.font-size("xl");
+  }
+
+  h2 {
+    @include typography.font-size("l");
+  }
+
+  h3 {
+    @include typography.font-size("m");
+  }
+}

package/core/styles/typography/_rem.scss

@@ -0,0 +1,24 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "sass:math";
+$html-font-size: 16px;
+
+@function stripUnit($value) {
+  @return math.div($value, $value * 0 + 1);
+}
+
+@function rem($pxValue) {
+  $remValue: math.div(stripUnit($pxValue), stripUnit($html-font-size));
+  @return #{$remValue}rem;
+}

package/core/styles/typography/_typography.import.scss

@@ -0,0 +1,195 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "sass:map";
+
+@use "../../breakpoints/breakpoints.import" as breakpoints;
+@use "./rem" as utils;
+
+$primary-font-family: "Open Sans", sans-serif;
+$monospace-font-family: "Droid Sans Mono", monospace;
+
+$font-weights: (
+  "regular": 400,
+  "semi-bold": 600,
+  "bold": 700,
+);
+
+$font-sizes: (
+  "xxl": (
+    "font-size": 32px,
+    "line-height": 42px,
+  ),
+  "xl": (
+    "font-size": 26px,
+    "line-height": 36px,
+  ),
+  "l": (
+    "font-size": 20px,
+    "line-height": 28px,
+  ),
+  "m": (
+    "font-size": 16px,
+    "line-height": 24px,
+  ),
+  "s": (
+    "font-size": 14px,
+    "line-height": 20px,
+  ),
+  "xs": (
+    "font-size": 12px,
+    "line-height": 22px,
+  ),
+);
+
+@mixin font-size($size) {
+  $sizes: map.get($font-sizes, $size);
+  font-size: utils.rem(map.get($sizes, "font-size"));
+  line-height: utils.rem(map.get($sizes, "line-height"));
+}
+
+@mixin font-weight($weight) {
+  font-weight: map.get($font-weights, $weight);
+}
+
+@mixin watt-headline-1 {
+  color: var(--watt-typography-headline-color);
+  @include font-size("xl");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+
+  @include breakpoints.media(">=Large") {
+    @include font-size("xxl");
+  }
+}
+
+@mixin watt-headline-2 {
+  color: var(--watt-typography-headline-color);
+  @include font-size("l");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+
+  @include breakpoints.media(">=Large") {
+    @include font-size("xl");
+  }
+}
+
+@mixin watt-headline-3 {
+  color: var(--watt-typography-headline-color);
+  @include font-size("m");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+
+  @include breakpoints.media(">=Large") {
+    @include font-size("l");
+  }
+}
+
+@mixin watt-headline-4 {
+  color: var(--watt-typography-headline-color);
+  @include font-size("m");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-headline-5 {
+  color: var(--watt-typography-headline-color);
+  @include font-size("m");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-headline-6 {
+  @include font-size("s");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-text-s {
+  @include font-size("s");
+  @include font-weight("regular");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-text-m {
+  @include font-size("m");
+  @include font-weight("regular");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-text-l {
+  @include font-size("l");
+  @include font-weight("regular");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-text-s-highlighted {
+  @include watt-text-s;
+  @include font-weight("bold");
+}
+
+@mixin watt-text-m-highlighted {
+  @include watt-text-m;
+  @include font-weight("bold");
+}
+
+@mixin watt-text-l-highlighted {
+  @include watt-text-l;
+  @include font-weight("bold");
+}
+
+@mixin watt-button {
+  color: var(--watt-typography-button-color);
+  @include font-size("m");
+  @include font-weight("semi-bold");
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@mixin watt-label {
+  color: var(--watt-typography-label-color);
+  @include font-size("s");
+  @include font-weight("semi-bold");
+  text-transform: uppercase;
+}
+
+@mixin watt-step-label {
+  color: var(--watt-typography-label-color);
+  @include font-size("m");
+  @include font-weight("semi-bold");
+  text-transform: none;
+}
+
+@mixin watt-link {
+  color: var(--watt-typography-link-color);
+  @include font-size("m");
+  @include font-weight("regular");
+  text-transform: none;
+  letter-spacing: 0;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+@mixin watt-link-s {
+  @include watt-link;
+  @include font-size("s");
+}

package/core/styles/typography/index.scss

@@ -0,0 +1,118 @@
+// Copyright 2020 Energinet DataHub A/S
+//
+// Licensed under the Apache License, Version 2.0 (the "License2");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use "./typography.import" as typography;
+
+body h1,
+.watt-headline-1 {
+  @include typography.watt-headline-1;
+}
+
+body h2,
+.watt-headline-2 {
+  @include typography.watt-headline-2;
+}
+
+body h3,
+.watt-headline-3 {
+  @include typography.watt-headline-3;
+}
+
+body h4,
+.watt-headline-4 {
+  @include typography.watt-headline-4;
+}
+
+body h5,
+.watt-headline-5 {
+  @include typography.watt-headline-5;
+}
+
+body h6,
+.watt-headline-6 {
+  @include typography.watt-headline-6;
+}
+
+.watt-text-l {
+  @include typography.watt-text-l;
+}
+
+body,
+.watt-text-m {
+  @include typography.watt-text-m;
+}
+
+small,
+.watt-text-s {
+  @include typography.watt-text-s;
+}
+
+.watt-text-l-highlighted {
+  @include typography.watt-text-l-highlighted;
+}
+
+body strong,
+.watt-text-m-highlighted {
+  @include typography.watt-text-m-highlighted;
+}
+
+body b {
+  @include typography.font-weight("semi-bold");
+}
+
+.watt-text-s-highlighted {
+  @include typography.watt-text-s-highlighted;
+}
+
+.watt-button {
+  @include typography.watt-button;
+}
+
+label,
+.watt-label {
+  @include typography.watt-label;
+}
+
+a,
+.watt-link {
+  @include typography.watt-link;
+}
+
+small a,
+.watt-link-s {
+  @include typography.watt-link-s;
+}
+
+.watt-on-dark {
+  &--high-emphasis {
+    color: var(--watt-on-dark-high-emphasis);
+  }
+  &--medium-emphasis {
+    color: var(--watt-on-dark-medium-emphasis);
+  }
+  &--low-emphasis {
+    color: var(--watt-on-dark-low-emphasis);
+  }
+}
+
+.watt-on-light {
+  &--high-emphasis {
+    color: var(--watt-on-light-high-emphasis);
+  }
+  &--medium-emphasis {
+    color: var(--watt-on-light-medium-emphasis);
+  }
+  &--low-emphasis {
+    color: var(--watt-on-light-low-emphasis);
+  }
+}

package/data/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2020 Energinet DataHub A/S
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License2");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { WattDataFiltersComponent } from './watt-data-filters.component';
+export { WattDataActionsComponent } from './watt-data-actions.component';
+export { WattDataIntlService } from './watt-data-intl.service';
+export { WattDataTableComponent } from './watt-data-table.component';

package/data/watt-data-actions.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class WattDataActionsComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattDataActionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattDataActionsComponent, "watt-data-actions", never, {}, {}, never, ["*"], true, never>;
+}

package/data/watt-data-filters.component.d.ts

@@ -0,0 +1,5 @@
+import * as i0 from "@angular/core";
+export declare class WattDataFiltersComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattDataFiltersComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattDataFiltersComponent, "watt-data-filters", never, {}, {}, never, ["*"], true, never>;
+}

package/data/watt-data-intl.service.d.ts

@@ -0,0 +1,15 @@
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class WattDataIntlService {
+    readonly changes: Subject<void>;
+    search: string;
+    emptyTitle: string;
+    emptyText: string;
+    emptyRetry: string;
+    errorTitle: string;
+    errorText: string;
+    defaultTitle: string;
+    defaultText: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattDataIntlService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WattDataIntlService>;
+}

package/data/watt-data-table.component.d.ts

@@ -0,0 +1,27 @@
+import { PageEvent } from '@angular/material/paginator';
+import { WATT_CARD_VARIANT } from '@energinet/watt/card';
+import { WattSearchComponent } from '@energinet/watt/search';
+import { WattTableComponent } from '@energinet/watt/table';
+import { WattDataIntlService } from './watt-data-intl.service';
+import * as i0 from "@angular/core";
+export declare class WattDataTableComponent {
+    intl: WattDataIntlService;
+    error: import("@angular/core").InputSignal<unknown>;
+    ready: import("@angular/core").InputSignal<boolean>;
+    enableSearch: import("@angular/core").InputSignal<boolean>;
+    enableRetry: import("@angular/core").InputSignal<boolean>;
+    queryTime: import("@angular/core").InputSignal<number | undefined>;
+    searchLabel: import("@angular/core").InputSignal<string | undefined>;
+    enablePaginator: import("@angular/core").InputSignal<boolean>;
+    count: import("@angular/core").InputSignal<number | undefined>;
+    variant: import("@angular/core").InputSignal<WATT_CARD_VARIANT>;
+    clear: import("@angular/core").OutputEmitterRef<void>;
+    pageChanged: import("@angular/core").OutputEmitterRef<PageEvent>;
+    retry: import("@angular/core").OutputEmitterRef<void>;
+    table: import("@angular/core").Signal<WattTableComponent<any>>;
+    search: import("@angular/core").Signal<WattSearchComponent | undefined>;
+    reset: () => void | undefined;
+    onSearch(value: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WattDataTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WattDataTableComponent, "watt-data-table", never, { "error": { "alias": "error"; "required": false; "isSignal": true; }; "ready": { "alias": "ready"; "required": false; "isSignal": true; }; "enableSearch": { "alias": "enableSearch"; "required": false; "isSignal": true; }; "enableRetry": { "alias": "enableRetry"; "required": false; "isSignal": true; }; "queryTime": { "alias": "queryTime"; "required": false; "isSignal": true; }; "searchLabel": { "alias": "searchLabel"; "required": false; "isSignal": true; }; "enablePaginator": { "alias": "enablePaginator"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "clear": "clear"; "pageChanged": "pageChanged"; "retry": "retry"; }, ["table"], ["h3", "h4", "*", "watt-data-actions", "watt-button", "watt-data-filters", "watt-table"], true, never>;
+}