@telia-ace/widget-ui 1.0.28-experimental.2 → 1.0.28-experimental.21

package/dist/mixins/context.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+export declare class ConsumerInterface {
+}
+export declare class ContextProviderInterface {
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const ConsumerMixin: <T extends Constructor<LitElement>>(Base: T) => Constructor<ConsumerInterface> & T;
+export declare const ContextProviderMixin: <T extends Constructor<LitElement>>(Base: T) => Constructor<ContextProviderInterface> & T;
+export {};

package/dist/mixins/index.d.ts

@@ -0,0 +1,5 @@
+export { ConsumerMixin } from './context';
+export { PendingState } from './pending-state';
+export { Provider as ProviderMixin } from './provider';
+export { Requester } from './requester';
+export { WidgetComponent as WidgetComponentMixin } from './widget-component';

package/dist/mixins/pending-state.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class PendingStateInterface {
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const PendingState: <T extends Constructor<LitElement>>(Base: T) => Constructor<PendingStateInterface> & T;
+export {};

package/dist/mixins/provider.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+export declare class ProviderInterface {
+    provideInstance(key: string, instance: any): void;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const Provider: <T extends Constructor<LitElement>>(Base: T) => Constructor<ProviderInterface> & T;
+export {};

package/dist/mixins/requester.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+export declare class RequesterInterface {
+    requestInstance(key: string): any;
+}
+type Constructor<T = {}> = new (...args: any[]) => T;
+export declare const Requester: <T extends Constructor<LitElement>>(Base: T) => Constructor<RequesterInterface> & T;
+export {};

package/dist/mixins/widget-component.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit';
+export declare class WidgetComponentInterface {
+    requestInstance(key: string): any;
+    nodeId: string;
+}
+export type WidgetComponentConstructor<T = {}> = new (...args: any[]) => T;
+export type _LitElement = LitElement;
+export declare const WidgetComponent: <T extends WidgetComponentConstructor<LitElement>>(Base: T) => WidgetComponentConstructor<WidgetComponentInterface> & T;

package/dist/utils/animations.d.ts

@@ -11,7 +11,7 @@ export declare const transitionComposer: {
     compose: (status: TransitionStatus | undefined, definitions: {
         enter: TransitionStateSettings;
         exit: TransitionStateSettings;
-    }) => false | import("@emotion/react").SerializedStyles | "" | undefined;
-    composeViewTransition: (status: TransitionStatus, type: string, direction?: 'forth' | 'back') => false | import("@emotion/react").SerializedStyles | "" | undefined;
+    }) => false | "" | import("@emotion/react").SerializedStyles | undefined;
+    composeViewTransition: (status: TransitionStatus, type: string, direction?: 'forth' | 'back') => false | "" | import("@emotion/react").SerializedStyles | undefined;
     get: (title: string) => any;
 };

package/dist/utils/map-context-style.d.ts

@@ -0,0 +1,5 @@
+export declare const mapContextStyle: (ctx: {
+    [key: string]: any;
+}) => {
+    [key: string]: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-ui",
-  "version": "1.0.28-experimental.2",
+  "version": "1.0.28-experimental.21",
   "description": "UI components used by ACE Widgets.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -9,27 +9,42 @@
   ],
   "main": "dist/index.js",
   "sourceMain": "src/index.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles/mixins.scss": {
+      "import": "./src/styles/mixins.scss",
+      "require": "./src/styles/mixins.scss"
+    },
+    "./package.json": {
+      "import": "./package.json",
+      "require": "./package.json"
+    }
+  },
   "type": "module",
   "types": "dist/index.d.ts",
   "files": [
     "LICENSE.txt",
     "README.md",
-    "dist/"
+    "dist/",
+    "src/styles/"
   ],
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "dependencies": {
-    "@telia-ace/widget-core": "1.0.21-experimental.2",
-    "@telia-ace/widget-routing": "1.0.22-experimental.2",
-    "@telia-ace/widget-utilities": "1.0.10-experimental.2",
+    "@open-wc/dedupe-mixin": "^1.3.1",
+    "@open-wc/lit-helpers": "^0.5.1",
+    "@telia-ace/widget-core": "1.0.21-experimental.21",
+    "@telia-ace/widget-routing": "1.0.22-experimental.21",
+    "@telia-ace/widget-utilities": "1.0.10-experimental.21",
     "@webprovisions/platform": "^1.1.2",
     "htmr": "1.0.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "lit": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.4",
@@ -38,15 +53,17 @@
   "devDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@telia-ace/widget-developer-tools": "1.0.16-experimental.2",
+    "@telia-ace/widget-developer-tools": "1.0.16-experimental.21",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-transition-group": "^4.4.5",
+    "lit": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^5.3.4",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "sass": "^1.57.1"
   },
   "scripts": {
     "clean": "rimraf ./dist",

package/src/styles/mixins.scss

@@ -0,0 +1,257 @@
+@mixin reset {
+    box-sizing: border-box;
+}
+
+@mixin genericHtml {
+    font-size: var(--fonts-normal);
+    font-weight: 300;
+    line-height: 1.5em;
+    color: var(--colors-text);
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        word-break: break-word;
+    }
+
+    h1:first-child,
+    h2:first-child,
+    h3:first-child,
+    h4:first-child,
+    h5:first-child,
+    h6:first-child {
+        margin-top: 0;
+    }
+
+    h1:only-child,
+    h2:only-child,
+    h3:only-child,
+    h4:only-child,
+    h5:only-child,
+    h6:only-child {
+        margin: 0;
+    }
+
+    h1:last-child,
+    h2:last-child,
+    h3:last-child,
+    h4:last-child,
+    h5:last-child,
+    h6:last-child {
+        margin-bottom: 0;
+    }
+
+    a {
+        color: var(--colors-link);
+    }
+
+    a:focus-visible {
+        outline: var(--accessibility-border);
+        color: var(--accessibility-colors-inactiveText);
+        border-color: transparent;
+        text-decoration: underline;
+    }
+
+    img {
+        max-width: 100% !important;
+        height: auto !important;
+    }
+
+    p {
+        word-break: break-word;
+        margin: var(--size-normal) 0;
+    }
+
+    p:first-child {
+        margin: 0 0 var(--size-normal);
+    }
+
+    p:last-child {
+        margin: var(--size-normal) 0 0;
+    }
+
+    p:only-child {
+        margin: 0;
+    }
+}
+
+@mixin contentBox {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    background: #ffffff;
+    border-radius: var(--borderRadius);
+    border: var(--border);
+    box-shadow: var(--boxShadow, none);
+}
+
+@mixin borderTabStyle {
+    outline: var(--accessibility-border);
+    color: var(--accessibility-colors-inactiveText);
+    border-color: transparent;
+}
+
+@mixin linkTabStyle {
+    outline: var(--accessibility-border);
+    color: var(--accessibility-colors-inactiveText);
+    border-color: transparent;
+    text-decoration: underline;
+}
+
+@mixin list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    > li {
+        margin: 0 0 var(--size-normal);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        min-width: 0;
+    }
+    > li:focus {
+        outline-offset: -2px;
+    }
+    > li > a {
+        text-decoration: none;
+    }
+    > li:last-child {
+        margin: 0;
+    }
+}
+
+@mixin itemList {
+    ui-item-list::part(list) {
+        @include list;
+    }
+
+    h1 {
+        margin: 0 0 var(--size-normal);
+        font-size: var(--fonts-medium);
+        font-weight: normal;
+        line-height: 1.8em;
+        color: var(--colors-text);
+    }
+    h1 {
+        display: flex;
+        align-items: center;
+    }
+    h1 i {
+        margin: 7px var(--size-normal) 0 0;
+        width: 24px;
+        display: inline-block;
+        vertical-align: text-bottom;
+        align-self: flex-start;
+        min-width: 24px;
+        min-height: 24px;
+        text-align: center;
+    }
+}
+
+@mixin buttonCss {
+    cursor: pointer;
+    text-align: center;
+    border: none;
+    font-weight: 300;
+    padding: var(--size-normal);
+    border-radius: var(--borderRadius);
+    font-family: inherit;
+    font-size: var(--fonts-normal);
+}
+
+@mixin invertedHoverButton {
+    $primary: var(--button-primary, var(--colors-primary));
+    $secondary: var(--button-secondary, var(--colors-secondary));
+
+    @include buttonCss;
+    border: 1px solid $primary;
+    background-color: $secondary;
+    color: $primary;
+
+    &.active {
+        border-color: $secondary;
+        background-color: $primary;
+        color: $secondary;
+    }
+
+    transition: background-color 200ms ease-out, color 200ms ease-out;
+
+    span,
+    i,
+    p,
+    a {
+        transition: color 200ms ease-out;
+        color: inherit;
+        font-size: var(--fonts-normal);
+    }
+
+    &:not([disabled]) {
+        &:hover {
+            background-color: $primary;
+            color: $secondary;
+
+            // span,
+            // i,
+            // p,
+            // a {
+            //     color: inherit;
+            // }
+        }
+
+        &:focus-visible {
+            @include borderTabStyle;
+        }
+    }
+}
+
+@mixin resetButton {
+    -webkit-appearance: button;
+    text-transform: none;
+    overflow: visible;
+    outline: none;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: normal;
+    margin: 0;
+    padding: 0;
+}
+
+@mixin scrollable {
+    // overflow-y: ${
+    //     browser() === Browsers.Chrome || browser() === Browsers.EdgeChromium ? 'overlay' : 'auto'
+    // };
+    overflow-y: auto;
+    overflow-x: hidden;
+    -ms-overflow-style: none; /* IE 10+ */
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: transparent transparent; /* Firefox */
+
+    &::-webkit-scrollbar {
+        width: 3px !important;
+        background-color: transparent;
+        border-left: none;
+    }
+    &::-webkit-scrollbar-thumb {
+        // background-color: transparent;
+        background-color: #7f7f7f !important;
+    }
+    &::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent;
+    }
+
+    // &.scrolling {
+    scrollbar-color: #7f7f7f transparent !important;
+    scrollbar-width: thin !important; /* Firefox */
+    -ms-overflow-style: none !important; /* IE 10+ */
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #7f7f7f !important;
+    }
+    // }
+}