@telia-ace/widget-components-area 1.0.0

package/LICENSE.txt

@@ -0,0 +1,6 @@
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+http://www.humany.com/legal

package/README.md

@@ -0,0 +1,3 @@
+# `@telia-ace/widget-components-area`
+
+Area component for ACE Widgets.

package/lib/animated-area.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Area: React.FC<any>;
+export default Area;

package/lib/animated-area.js

@@ -0,0 +1,70 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_types_grid_1 = require("@telia-ace/widget-types-grid");
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var Area = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, className = _a.className, renderState = _a.renderState, animation = _a.animation, other = __rest(_a, ["children", "className", "renderState", "animation"]);
+    if (!renderState) {
+        return null;
+    }
+    return (react_1.default.createElement(widget_ui_1.TransitionComponent, { mountOnEnter: renderState !== widget_core_1.WidgetRenderState.hidden, timeout: 200, in: renderState === widget_core_1.WidgetRenderState.open, transitions: animation, unmountOnExit: renderState === widget_core_1.WidgetRenderState.closed }, function (state, css) { return (react_1.default.createElement(Wrapper, __assign({}, other, { animationCss: css, "data-state": state, ref: ref, className: (0, widget_utilities_1.appendClassNames)('humany-animated-area', className) }), children)); }));
+});
+exports.default = Area;
+var Wrapper = (0, styled_components_1.default)(widget_ui_1.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), widget_types_grid_1.genericComponentStyling, function (p) { return !!p.animationCss && p.animationCss; }, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
+    return p.hidden &&
+        p['data-state'] === 'exited' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
+});
+var templateObject_1, templateObject_2;

package/lib/area-component.d.ts

@@ -0,0 +1,27 @@
+import { Container } from '@webprovisions/platform';
+declare type Symbol = {
+    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
+    content: string;
+};
+export declare enum AreaMode {
+    Static = "static",
+    Drawer = "drawer",
+    Dropdown = "dropdown",
+    Modal = "modal"
+}
+export declare type AreaComponentProps = {
+    mode: AreaMode;
+    animation?: string;
+    fullScreen?: boolean;
+    columns?: number;
+    scrollable?: boolean;
+    header?: string;
+    trigger?: {
+        symbol?: Symbol;
+        label?: string;
+        size?: number;
+        ariaLabel?: string;
+    };
+};
+export declare const AreaComponent: (container: Container) => Promise<void>;
+export default AreaComponent;

package/lib/area-component.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AreaComponent = exports.AreaMode = void 0;
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var AreaMode;
+(function (AreaMode) {
+    AreaMode["Static"] = "static";
+    AreaMode["Drawer"] = "drawer";
+    AreaMode["Dropdown"] = "dropdown";
+    AreaMode["Modal"] = "modal";
+})(AreaMode = exports.AreaMode || (exports.AreaMode = {}));
+var AreaComponent = function (container) {
+    return (0, widget_ui_1.createReactComponent)(container, 'area', Promise.resolve().then(function () { return __importStar(require('./area')); }), function (component) { });
+};
+exports.AreaComponent = AreaComponent;
+exports.default = exports.AreaComponent;

package/lib/area.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Area: React.FC<any>;
+export default Area;

package/lib/area.js

@@ -0,0 +1,148 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_types_grid_1 = require("@telia-ace/widget-types-grid");
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var animated_area_1 = __importDefault(require("./animated-area"));
+var area_component_1 = require("./area-component");
+var Area = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var name = (0, widget_ui_1.useComponentDescriptor)().name;
+    var renderState = (0, widget_ui_1.useRenderState)();
+    var context = (0, widget_ui_1.useContext)();
+    var properties = (0, widget_ui_1.useProperties)();
+    var children = (0, widget_ui_1.useChildren)();
+    var container = (0, widget_ui_1.useContainer)();
+    var _b = context.gap, gap = _b === void 0 ? '0' : _b;
+    var _c = properties.columns, columns = _c === void 0 ? 1 : _c, _d = properties.animation, animation = _d === void 0 ? 'none' : _d, _e = properties.scrollable, scrollable = _e === void 0 ? false : _e, _f = properties.mode, mode = _f === void 0 ? area_component_1.AreaMode.Static : _f, _g = properties.trigger, trigger = _g === void 0 ? {} : _g, fullScreen = properties.fullScreen, header = properties.header, areaProperties = __rest(properties, ["columns", "animation", "scrollable", "mode", "trigger", "fullScreen", "header"]);
+    var _h = trigger.size, size = _h === void 0 ? 24 : _h, symbol = trigger.symbol, label = trigger.label, ariaLabel = trigger.ariaLabel, otherTriggerProps = __rest(trigger, ["size", "symbol", "label", "ariaLabel"]);
+    var _j = __read((0, widget_ui_1.useScroll)(scrollable), 2), scrollableCss = _j[0], elem = _j[1];
+    var setRef = (0, react_1.useCallback)(function (node) {
+        var events = container.get('$widget').events;
+        events.dispatch('widget:area-rendered', {
+            name: name,
+            properties: properties,
+            element: node,
+        });
+        elem.current = node;
+        return node;
+    }, [properties, renderState]);
+    if (!children.length) {
+        return (0, widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-area') }));
+    }
+    var props = __assign(__assign(__assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-area', "humany-area-".concat(name)), scrollableCss: scrollableCss }), areaProperties), { columns: columns, gap: gap, renderState: renderState, animation: animation, hidden: renderState === widget_core_1.WidgetRenderState.hidden, ref: setRef });
+    var content = (function () {
+        if (animation !== 'none') {
+            return (react_1.default.createElement(widget_ui_1.ColumnContext.Provider, { value: columns },
+                react_1.default.createElement(animated_area_1.default, __assign({}, props), children.map(function (child) { return (react_1.default.createElement(widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })); }))));
+        }
+        if (renderState === widget_core_1.WidgetRenderState.closed) {
+            return null;
+        }
+        return (react_1.default.createElement(widget_ui_1.ColumnContext.Provider, { value: columns },
+            react_1.default.createElement(Wrapper, __assign({}, props), children.map(function (child) { return (react_1.default.createElement(widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })); }))));
+    })();
+    if (mode === area_component_1.AreaMode.Static) {
+        return content;
+    }
+    var triggerButton = (react_1.default.createElement(Trigger, __assign({ className: "humany-area-trigger", title: ariaLabel }, (0, widget_ui_1.filterCssProps)(otherTriggerProps)),
+        label && react_1.default.createElement(TriggerLabel, null, label),
+        symbol && react_1.default.createElement(TriggerSymbolBadge, { symbol: symbol, size: size })));
+    if (mode === area_component_1.AreaMode.Dropdown) {
+        return react_1.default.createElement(widget_ui_1.Dropdown, { trigger: triggerButton }, content);
+    }
+    if (mode === area_component_1.AreaMode.Drawer) {
+        var drawerAnimation = (Object.values(widget_ui_1.DrawerAnimationType).includes(animation) && {
+            type: animation,
+        }) ||
+            undefined;
+        return (react_1.default.createElement(widget_ui_1.Drawer, { header: header, animation: drawerAnimation, fullScreen: fullScreen, trigger: triggerButton }, content));
+    }
+    if (mode === area_component_1.AreaMode.Modal) {
+        widget_utilities_1.Logger.warn('modal area not implemented');
+        return null;
+    }
+    return null;
+};
+exports.default = Area;
+var Trigger = (0, styled_components_1.default)(widget_ui_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"], ["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"])), widget_ui_1.filterCssPropsStyle, function (p) {
+    return p.theme.fonts &&
+        "\n    font-family: ".concat(p.theme.fonts.type, ";\n    font-size: ").concat(p.theme.fonts.normal, ";\n  ");
+}, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && widget_ui_1.paddedBorderTabStyle; });
+var TriggerLabel = (0, styled_components_1.default)(widget_ui_1.Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"], ["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var TriggerSymbolBadge = (0, styled_components_1.default)(widget_ui_1.SymbolBadge)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    path {\n        fill: ", ";\n    }\n"], ["\n    path {\n        fill: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var Wrapper = (0, styled_components_1.default)(widget_ui_1.Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), widget_types_grid_1.genericComponentStyling, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
+    return p.hidden && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import AreaComponent from './area-component';
+export default AreaComponent;

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var area_component_1 = __importDefault(require("./area-component"));
+exports.default = area_component_1.default;

package/lib-esm/animated-area.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Area: React.FC<any>;
+export default Area;

package/lib-esm/animated-area.js

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { WidgetRenderState } from '@telia-ace/widget-core';
+import { genericComponentStyling } from '@telia-ace/widget-types-grid';
+import { Grid, TransitionComponent } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+var Area = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, renderState = _a.renderState, animation = _a.animation, other = __rest(_a, ["children", "className", "renderState", "animation"]);
+    if (!renderState) {
+        return null;
+    }
+    return (React.createElement(TransitionComponent, { mountOnEnter: renderState !== WidgetRenderState.hidden, timeout: 200, in: renderState === WidgetRenderState.open, transitions: animation, unmountOnExit: renderState === WidgetRenderState.closed }, function (state, css) { return (React.createElement(Wrapper, __assign({}, other, { animationCss: css, "data-state": state, ref: ref, className: appendClassNames('humany-animated-area', className) }), children)); }));
+});
+export default Area;
+var Wrapper = styled(Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), genericComponentStyling, function (p) { return !!p.animationCss && p.animationCss; }, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
+    return p.hidden &&
+        p['data-state'] === 'exited' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
+});
+var templateObject_1, templateObject_2;

package/lib-esm/area-component.d.ts

@@ -0,0 +1,27 @@
+import { Container } from '@webprovisions/platform';
+declare type Symbol = {
+    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
+    content: string;
+};
+export declare enum AreaMode {
+    Static = "static",
+    Drawer = "drawer",
+    Dropdown = "dropdown",
+    Modal = "modal"
+}
+export declare type AreaComponentProps = {
+    mode: AreaMode;
+    animation?: string;
+    fullScreen?: boolean;
+    columns?: number;
+    scrollable?: boolean;
+    header?: string;
+    trigger?: {
+        symbol?: Symbol;
+        label?: string;
+        size?: number;
+        ariaLabel?: string;
+    };
+};
+export declare const AreaComponent: (container: Container) => Promise<void>;
+export default AreaComponent;

package/lib-esm/area-component.js

@@ -0,0 +1,12 @@
+import { createReactComponent } from '@telia-ace/widget-ui';
+export var AreaMode;
+(function (AreaMode) {
+    AreaMode["Static"] = "static";
+    AreaMode["Drawer"] = "drawer";
+    AreaMode["Dropdown"] = "dropdown";
+    AreaMode["Modal"] = "modal";
+})(AreaMode || (AreaMode = {}));
+export var AreaComponent = function (container) {
+    return createReactComponent(container, 'area', import('./area'), function (component) { });
+};
+export default AreaComponent;

package/lib-esm/area.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Area: React.FC<any>;
+export default Area;

package/lib-esm/area.js

@@ -0,0 +1,120 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { WidgetRenderState } from '@telia-ace/widget-core';
+import { Component, genericComponentStyling } from '@telia-ace/widget-types-grid';
+import { Button, ColumnContext, createEmptyComponent, Drawer, DrawerAnimationType, Dropdown, filterCssProps, filterCssPropsStyle, Grid, paddedBorderTabStyle, SymbolBadge, Text, useChildren, useComponentDescriptor, useContainer, useContext, useProperties, useRenderState, useScroll, } from '@telia-ace/widget-ui';
+import { appendClassNames, Logger } from '@telia-ace/widget-utilities';
+import React, { useCallback } from 'react';
+import styled, { css } from 'styled-components';
+import AnimatedArea from './animated-area';
+import { AreaMode } from './area-component';
+var Area = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var name = useComponentDescriptor().name;
+    var renderState = useRenderState();
+    var context = useContext();
+    var properties = useProperties();
+    var children = useChildren();
+    var container = useContainer();
+    var _b = context.gap, gap = _b === void 0 ? '0' : _b;
+    var _c = properties.columns, columns = _c === void 0 ? 1 : _c, _d = properties.animation, animation = _d === void 0 ? 'none' : _d, _e = properties.scrollable, scrollable = _e === void 0 ? false : _e, _f = properties.mode, mode = _f === void 0 ? AreaMode.Static : _f, _g = properties.trigger, trigger = _g === void 0 ? {} : _g, fullScreen = properties.fullScreen, header = properties.header, areaProperties = __rest(properties, ["columns", "animation", "scrollable", "mode", "trigger", "fullScreen", "header"]);
+    var _h = trigger.size, size = _h === void 0 ? 24 : _h, symbol = trigger.symbol, label = trigger.label, ariaLabel = trigger.ariaLabel, otherTriggerProps = __rest(trigger, ["size", "symbol", "label", "ariaLabel"]);
+    var _j = __read(useScroll(scrollable), 2), scrollableCss = _j[0], elem = _j[1];
+    var setRef = useCallback(function (node) {
+        var events = container.get('$widget').events;
+        events.dispatch('widget:area-rendered', {
+            name: name,
+            properties: properties,
+            element: node,
+        });
+        elem.current = node;
+        return node;
+    }, [properties, renderState]);
+    if (!children.length) {
+        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-area') }));
+    }
+    var props = __assign(__assign(__assign(__assign({}, other), { className: appendClassNames(className, 'humany-area', "humany-area-".concat(name)), scrollableCss: scrollableCss }), areaProperties), { columns: columns, gap: gap, renderState: renderState, animation: animation, hidden: renderState === WidgetRenderState.hidden, ref: setRef });
+    var content = (function () {
+        if (animation !== 'none') {
+            return (React.createElement(ColumnContext.Provider, { value: columns },
+                React.createElement(AnimatedArea, __assign({}, props), children.map(function (child) { return (React.createElement(Component, { key: child.id, id: child.id, branch: "default" })); }))));
+        }
+        if (renderState === WidgetRenderState.closed) {
+            return null;
+        }
+        return (React.createElement(ColumnContext.Provider, { value: columns },
+            React.createElement(Wrapper, __assign({}, props), children.map(function (child) { return (React.createElement(Component, { key: child.id, id: child.id, branch: "default" })); }))));
+    })();
+    if (mode === AreaMode.Static) {
+        return content;
+    }
+    var triggerButton = (React.createElement(Trigger, __assign({ className: "humany-area-trigger", title: ariaLabel }, filterCssProps(otherTriggerProps)),
+        label && React.createElement(TriggerLabel, null, label),
+        symbol && React.createElement(TriggerSymbolBadge, { symbol: symbol, size: size })));
+    if (mode === AreaMode.Dropdown) {
+        return React.createElement(Dropdown, { trigger: triggerButton }, content);
+    }
+    if (mode === AreaMode.Drawer) {
+        var drawerAnimation = (Object.values(DrawerAnimationType).includes(animation) && {
+            type: animation,
+        }) ||
+            undefined;
+        return (React.createElement(Drawer, { header: header, animation: drawerAnimation, fullScreen: fullScreen, trigger: triggerButton }, content));
+    }
+    if (mode === AreaMode.Modal) {
+        Logger.warn('modal area not implemented');
+        return null;
+    }
+    return null;
+};
+export default Area;
+var Trigger = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"], ["\n    display: flex;\n    align-items: inherit;\n    align-self: center;\n    width: fit-content;\n    height: fit-content;\n    ", "\n\n    ", "\n\n  &:focus {\n        ", ";\n    }\n"])), filterCssPropsStyle, function (p) {
+    return p.theme.fonts &&
+        "\n    font-family: ".concat(p.theme.fonts.type, ";\n    font-size: ").concat(p.theme.fonts.normal, ";\n  ");
+}, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && paddedBorderTabStyle; });
+var TriggerLabel = styled(Text)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"], ["\n    margin: 0 ", " 0 0;\n    color: ", ";\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var TriggerSymbolBadge = styled(SymbolBadge)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    path {\n        fill: ", ";\n    }\n"], ["\n    path {\n        fill: ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var Wrapper = styled(Grid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"], ["\n    ", "\n    ", "\n  text-size-adjust: 100%;\n    input::-ms-clear {\n        display: none;\n    }\n    ", ";\n"])), genericComponentStyling, function (p) { return !!p.scrollableCss && p.scrollableCss; }, function (p) {
+    return p.hidden && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            visibility: collapse;\n            pointer-events: none;\n        "], ["\n            visibility: collapse;\n            pointer-events: none;\n        "])));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib-esm/index.d.ts

@@ -0,0 +1,2 @@
+import AreaComponent from './area-component';
+export default AreaComponent;

package/lib-esm/index.js

@@ -0,0 +1,2 @@
+import AreaComponent from './area-component';
+export default AreaComponent;

package/package.json

@@ -0,0 +1,45 @@
+{
+    "name": "@telia-ace/widget-components-area",
+    "version": "1.0.0",
+    "description": "Area component for ACE Widgets.",
+    "license": "SEE LICENSE IN LICENSE.txt",
+    "author": "Telia Company AB",
+    "keywords": [
+        "telia"
+    ],
+    "main": "lib/index.js",
+    "module": "lib-esm/index.js",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/widget-core": "^1.0.0",
+        "@telia-ace/widget-types-grid": "^1.0.0",
+        "@telia-ace/widget-ui": "^1.0.0",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-transition-group": "^4.2.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/react-transition-group": "^4.2.3",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "26a4f73e6b1811cf60ca62a274b54b15127a83f6"
+}