digipolisantwerp / antwerp-ui_angular Goto Github PK

Describe the bug

When you have a lot of pages and you pass currentPage >= 5 as a string, the pagination renders with far too many number buttons.

The bug is introduced on this line: https://github.com/digipolisantwerp/acpaas-ui_angular/blob/master/packages/pagination/lib/src/pagination/components/pagination/pagination.component.ts#L69

When currentPage is a string, the slice command ends up converting to at least "5" + 1, or page 51.

Workaround

The application that renders the aui-pagination can pass currentPage as a number instead of a string. The bug does not occur in that case.

Screenshots

Describe the bug

The routerContext boolean of the Context Service always needs to be set with the value true to update the page title.
This should not be needed, because this creates an extra listener on routechange.

To Reproduce

Steps to reproduce the behavior:

1. Add the ContextModule to your appModule

import { CookieconsentModule } from '@acpaas-ui/ngx-components/layout';

ContextModule.forRoot({
   defaults: {
      title: 'Context title',
   },
   routerContext: true,
}),

Expected behavior

routerContext shouldn't be needed.

OS (please complete the following information):

• Device: MacBook Pro (Retina, 13-inch, Late 2013)
• OS: macOS High Sierra (Version 10.13.6)

Description

The current contribution guidelines are copied from vue.js, and contain various things which are not correct:

• refers to stackoverflow to post questions, which nobody is keeping an eye on
• proposes that PR's are sent to the dev branch, but no dev branch exists
• is missing guidelines around examples and documentation
• refers to "npm run commit" which doesn't exist
• does not explain the project structure
• is missing an explanation of how releases happen (how do PR's end up in a release)

Proposed changes

• Where to ask questions:
  • Slack for quick questions
  • Github issues for bug reports or feature requests
  • Google groups for longer discussions (a new group is set up, we offload these discussions here so they are permanently documented and do not pollute the issue space) (github issues for everything, see comments)
• PR steps / checklist
  • Fork + topic branch
  • Proper branch (see release model)
  • Commit message format (remove mention of npm run commit)
  • Features are accompanied by documentation updates and unit tests (or explain in the PR why docs / tests are not necessary)
• Release model
  • PR's to master, not to dev, because merging regularly from dev to master is going to be supremely annoying, and not really any more flexible or stable. Stick close to github flow model.
  • Tag to release straight from master. Hotfixes can be done by branching off the tag, cherry-picking from master and tagging from the branch (+ publishing the tag to npm). This is as compared to branching for release every time, which is a lot more work without a real practical benefit.
  • When doing a major release, create a maintenance branch for it (e.g. v1-dev), from which maintenance releases can be done.
  • Release frequency: ad-hoc for high-prio changes, otherwise monthly. (+ describe strategy for projects that need upstream changes so they don't have to wait a month)

Describe the bug

The documentation for the analytics component is incorrect. GaService should be replaced by GAService

To Reproduce

Expected behavior

Screenshots

OS (please complete the following information):

All

Additional context

Describe the bug

Als je de fly-out openklikt, opent hij enkele milliseconden en sluit dan automatisch weer.

To Reproduce

1. Klik op een knop die de fly-out gebruikt (bijv autocomplete component)
2. De fly-out opent en sluit direct
3. Als je nogmaals klikt werkt het wel

Expected behavior

Fly-out blijft na 1 klik open staan totdat gebruiker hem zelf wilt sluiten

OS (please complete the following information):

Valt voor in Chrome.

Additional context

Jasper VP is al op de hoogte. Probleem werd gedetecteerd in het project Verfijning.
Graag even een mailtje naar [email protected], [email protected] en [email protected] wanneer de bug opgelost is.

Describe the bug

When setting up an angular 7 or 8 project with ngx-components errors are shown by npm:

requires a peer of @angular/core@^6.1.0 but none is installed

This is due to the use of ^ in the peerdependencies. Instead > should be used, or the use of the double pipe to signify that multiple major releases are supported.

Expected behavior

No peerdependencies warnings if a compatible angular version is used.

Is your feature request related to a problem? Please describe.

When navigating via keyboard through a form it's convenient to be able to not have to switch to the mouse. A common use case for date input field is to choose yesterday, today or tomorrow. Those should be easy to choose via the keyboard.

This won't be discoverable, but documentation can explain it for the power users.

Describe the solution you'd like

Suggested keyboard shortcuts for the date picker input field:

• "v" / "t" / ctrl/cmd+";" --> today
• "g" / "y" --> yesterday
• "m" --> tomorrow
• arrowup --> move up one day
• arrowdown --> move down one day

Additional context

In excel this is ctrl/cmd+;
https://exceljet.net/keyboard-shortcuts/insert-current-date

Is your feature request related to a problem? Please describe.

We are using Angular 6.0 and are getting a lot of warnings for incorrect peer dependencies

Describe the solution you'd like

Update the version requirements

Describe alternatives you've considered

Changing the code by hand.

Additional context

I am from Codific

Is your feature request related to a problem? Please describe.

The code snippet component renders the given data only once.
When the data is updated, the rendered code snippet won't update.

Describe the solution you'd like

The rendered code snippet should update when it's source is updated.

Describe the bug

The badges in the readme are broken.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/digipolisantwerp/acpaas-ui_angular
2. See the badges in the ecosystem part of the readme
3. they show "invalid response data" errors

Describe the bug

The README.md file has a number of links that go nowhere, and it is also missing instructions for how to use ACPaaS UI.

Expected behavior

All links go somewhere sane, clear instructions are given on how to get started using ACPaaS UI.

Describe the bug

The Modal package isn't available in the ngx-components node_modules.
Edit to be clear:
The 'layout' bundle consists of a Header, Hero, Modal, ...
But the build package doesn't contain a Modal.

To Reproduce

Steps to reproduce the behavior:

1. npm install @acpaas-ui/ngx-components
2. node_modules/@acpaas-ui/ngx-components/layout/index.d.ts doesn't contain Modal

Expected behavior

The ngx-components layout bundle should contain a Modal module.

Screenshots

N/A

OS (please complete the following information):

• Device: MacBook Pro (Retina, 13-inch, Late 2013)
• OS: macOS High Sierra (Version 10.13.6)
• Browser: N/A
• Version: N/A

Additional context

ngx-components v1.0.1

Describe the bug

The WindowService still just attempts to access the global window. We should instead use the defaultView, available on the native document, which returns the native window in a browser environment. Since an InjectionToken for document is already provided by Angular, we can remove this dependency on a global variable.

To Reproduce

/

Expected behavior

Don't use global variables.

Screenshots

/

OS (please complete the following information):

/

Additional context

Add any other context about the problem here.

Description

The Cookie Consent module has an issue where it doesn't close instantly when tapping "Allow cookies". It only hides after clicking outside of the Cookie Consent bar.

Reproduce

1. Visit the documentation page of the cookie consent form.
2. Click on "Allow cookies". The cookie consent bar will not disappear yet.
3. Click outside of the cookie consent bar. The cookie consent bar will disappear.

Expected behavior

It should close instantly when tapping "Allow cookies".

GIF

The issue is visible here.

Describe the bug

Errors when doing an 'nmp run styleguide'

Screenshots

If applicable, add screenshots to help explain your problem.

OS (please complete the following information):

Windows 10

Additional context

examples.routes:

import { C:\USERS\RC01673\DOCUMENTS\ACPAAS-UI_ANGULAR\PACKAGES\AVATAR_EXAMPLES_ROUTES } from '@acpaas-ui/ngx-examples/C:\Users\rc01673\Documents\acpaas-ui_angular\packages\avatar';
import { C:\USERS\RC01673\DOCUMENTS\ACPAAS-UI_ANGULAR\PACKAGES\LOGO_EXAMPLES_ROUTES } from '@acpaas-ui/ngx-examples/C:\Users\rc01673\Documents\acpaas-ui_angular\packages\logo';

export const EXAMPLES_ROUTES = [
{ path: 'C:\Users\rc01673\Documents\acpaas-ui_angular\packages\avatar', children: C:\USERS\RC01673\DOCUMENTS\ACPAAS-UI_ANGULAR\PACKAGES\AVATAR_EXAMPLES_ROUTES },
{ path: 'C:\Users\rc01673\Documents\acpaas-ui_angular\packages\logo', children: C:\USERS\RC01673\DOCUMENTS\ACPAAS-UI_ANGULAR\PACKAGES\LOGO_EXAMPLES_ROUTES },
];

Describe the bug

An existing bug in the acpaas-ui_js repo also occurs in the acpaas-ui_angular repo when using the notification-service of the @acpaas-ui/ngx-components.

https://github.com/digipolisantwerp/acpaas-ui_js/issues/3

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

OS (please complete the following information):

• Device: HP laptop
• OS: WIN10
• Browser Chrome
• Version N/A

Additional context

Add any other context about the problem here.

Is your feature request related to a problem? Please describe.

We have a table that has an Inline edit component but the component loses its state when clicking, because a new one replaces it. I would like not to make special logic which will spaghettify our software production line.

Describe the solution you'd like

Either a flag to the table or change the functionality so that it does not create a new instance of the component.

Describe alternatives you've considered

Manually tweaking the code of the table component which is being done for now.

Additional context

I am from Codific

Is your feature request related to a problem? Please describe.

There is no documentation on how to give custom config to the aui-wysiwyg.

Describe the solution you'd like

Write documentation ;-)

Describe alternatives you've considered

Looking on the CKEditor documentation page: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-bodyClass

Additional context

N/A

Describe the bug

Footer component: using the suggested html doesn't work

To Reproduce

Steps to reproduce the behavior:

1. Install Footer Module as described
2. Footer isn't printed

Expected behavior

Footer should have been generated

OS (please complete the following information):

• Chrome

Additional context

Removing <div class="u-margin-bottom u-margin-top"> wrapper fixed the issue

Describe the bug

There's no documentation for the modal component

To Reproduce

Expected behavior

Screenshots

OS (please complete the following information):

All

Additional context

Is your feature request related to a problem? Please describe.

To help developers and testers making their automated tests more stable, some guidelines are needed.

Describe the solution you'd like

Add test automation guidelines.

Describe the bug

When implementing the "Context" component in my app that doesn't use redux, I get the error Module not found: Error: Can't resolve '@angular-redux/store' in '/Users/trianglejuice/Desktop/context/node_modules/@acpaas-ui/ngx-components/context/fesm5'

To Reproduce

1. Create an empty app
2. In app.module.ts:

import { ContextModule } from '@acpaas-ui/ngx-components/context';
[...]
  imports: [
    BrowserModule,
    ContextModule.forRoot({
      useTitleSuffix: true,
      extendTitle: true,
      titleDelimiter: '|',
      defaults: {
        title: 'test',
      },
    }),
  ],
[...]

3. Run the app

Expected behavior

A working app.

Screenshots

N/A

OS (please complete the following information):

• Device: MacBook Pro (Retina, 15-inch, Early 2013)
• OS: macOS 10.13.6 (High Sierra)
• Browser: all
• Version: any

Additional context

Describe the bug

The localstorage memory polyfill uses Proxy, which is not available (or polyfill-able) on ie11.

To Reproduce

Use the localstorage package in an app and open it in ie11.

Expected behavior

It should work

Describe the bug

When filtering data in autocomplete all displayed options that match the searched text, are displayed to match the casing of the searched text.

To Reproduce

1. Use autocomplete component for a collection containing case sensitive data(ex. [“abc”, “abC”, "ABC", etc...]).
2. Search for:
   2.1 "ABC"
   2.2 "abc"

Expected behavior

Displayed names of matching result should be the same as the real data(ex. [“abc”, “abC”]).

Describe the bug

The routes to the different components inside the styleguide cannot be accessed directly.

To Reproduce

1. Browse to https://digipolisantwerp.github.io/acpaas-ui_angular
2. The page automatically navigates to the avatar module url
3. Refresh the page
4. A 404 error is shown

Expected behavior

The routes should navigate to the right component when loaded directly in the browser.

Describe the bug

Using aui-autocomplete inside modal, on selecting any autocomplete option the modal closes.

To Reproduce

1. Implement aui-autocomplete in aui-modal
2. Click on autocomplete
3. Select any option from autocomplete results
4. Modal closes

Expected behavior

Modal should stay open/be unaffected by aui-autocomplete actions/

Replace custom title-case pipe in the calendar package by the built-in Angular title-case pipe.

See: https://github.com/digipolisantwerp/acpaas-ui_angular/blob/master/packages/calendar/src/lib/calendar/pipes/title-case.pipe.ts

Describe the bug

Certain components become really unresponsive after using them for a (short) while.

To Reproduce

1. Go to the online styleguide
2. Navigate to the "Forms" examples
3. Try to use some examples

Expected behavior

Components should be smooth as butter ;-)

Screenshots

If applicable, add screenshots to help explain your problem.

OS (please complete the following information):

• Device: MacBook Pro (Retina, 15-inch, Early 2013)
• OS: macOS 10.13.6 (High Sierra)
• Browser: any
• Version: all

Additional context

It seems that the unresponsiveness has to do something with components that use two-way binding.

Describe the bug

The aui-leaflet component with the values taken from the official documentation gives an incorrect view

To Reproduce

Steps to reproduce the behavior:

1.https://digipolisantwerp.github.io/acpaas-ui_angular/modules/map
2. Copy code in component
3. Open browser en view result

Expected behavior

A clean tiled map of Antwerp

Screenshots

OS (please complete the following information):

• Browser Chrome
• npm version 5.6.0
• angular cli version 1.7.3

Describe the bug

When running ng build table the build fails with the following error:

BUILD ERROR
packages/table/src/table.ts(7,45): error TS2307: Cannot find module './lib/table/column-selector/column-selector.component'.
packages/table/src/table.ts(10,43): error TS2307: Cannot find module './lib/table/table-bar-item/table-bar-item.directive'.
packages/table/src/table.ts(11,45): error TS2307: Cannot find module './lib/table/table-bar-search/table-bar-search.directive'.
packages/table/src/table.ts(12,39): error TS2307: Cannot find module './lib/table/table-bar/table-bar.component'.
packages/table/src/table.ts(13,40): error TS2307: Cannot find module './lib/table/table-cell/table-cell.component'.
packages/table/src/table.ts(14,42): error TS2307: Cannot find module './lib/table/table-header/table-header.component'.
packages/table/src/table.ts(15,36): error TS2307: Cannot find module './lib/table/table/table.component'.

Error: packages/table/src/table.ts(7,45): error TS2307: Cannot find module './lib/table/column-selector/column-selector.component'.
packages/table/src/table.ts(10,43): error TS2307: Cannot find module './lib/table/table-bar-item/table-bar-item.directive'.
packages/table/src/table.ts(11,45): error TS2307: Cannot find module './lib/table/table-bar-search/table-bar-search.directive'.
packages/table/src/table.ts(12,39): error TS2307: Cannot find module './lib/table/table-bar/table-bar.component'.
packages/table/src/table.ts(13,40): error TS2307: Cannot find module './lib/table/table-cell/table-cell.component'.
packages/table/src/table.ts(14,42): error TS2307: Cannot find module './lib/table/table-header/table-header.component'.
packages/table/src/table.ts(15,36): error TS2307: Cannot find module './lib/table/table/table.component'.

    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
    at Object.compileSourceFiles (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

packages/table/src/table.ts(7,45): error TS2307: Cannot find module './lib/table/column-selector/column-selector.component'.
packages/table/src/table.ts(10,43): error TS2307: Cannot find module './lib/table/table-bar-item/table-bar-item.directive'.
packages/table/src/table.ts(11,45): error TS2307: Cannot find module './lib/table/table-bar-search/table-bar-search.directive'.
packages/table/src/table.ts(12,39): error TS2307: Cannot find module './lib/table/table-bar/table-bar.component'.
packages/table/src/table.ts(13,40): error TS2307: Cannot find module './lib/table/table-cell/table-cell.component'.
packages/table/src/table.ts(14,42): error TS2307: Cannot find module './lib/table/table-header/table-header.component'.
packages/table/src/table.ts(15,36): error TS2307: Cannot find module './lib/table/table/table.component'.

Error: packages/table/src/table.ts(7,45): error TS2307: Cannot find module './lib/table/column-selector/column-selector.component'.
packages/table/src/table.ts(10,43): error TS2307: Cannot find module './lib/table/table-bar-item/table-bar-item.directive'.
packages/table/src/table.ts(11,45): error TS2307: Cannot find module './lib/table/table-bar-search/table-bar-search.directive'.
packages/table/src/table.ts(12,39): error TS2307: Cannot find module './lib/table/table-bar/table-bar.component'.
packages/table/src/table.ts(13,40): error TS2307: Cannot find module './lib/table/table-cell/table-cell.component'.
packages/table/src/table.ts(14,42): error TS2307: Cannot find module './lib/table/table-header/table-header.component'.
packages/table/src/table.ts(15,36): error TS2307: Cannot find module './lib/table/table/table.component'.

    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
    at Object.compileSourceFiles (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

To Reproduce

Steps to reproduce the behavior:

1. Run ng build table
2. See error

Expected behavior

Successful build. All other packages have no issues

Screenshots

N/A

OS (please complete the following information):

• Device: MacBook Pro (Retina, 15-inch, Early 2013)
• OS: macOS High Sierra (Version 10.13.6)
• Browser: N/A
• Version: N/A

Additional context

Threw away node_modules and package-lock.json. Tried again. Same error.

Describe the bug

After the datepicker is opened and then the user clicks outside the component, the datepicker should be closed but remains open when losing focus.

To Reproduce

Steps to reproduce the behavior:

1. Open the datepicker via the calendar icon
2. Click outside the component

Expected behavior

Datepicker should close

OS

• Device: PC
• OS: Windows 10
• Browser: Chrome 75, Edge 42, Firefox 67

The example and the readme of the 'table component' only contains basic properties at the moment:

<aui-table
	noDataMessage="There is no data!"
	loadDataMessage="Loading..."
	noColumsMessage="There are no columns!"
	[loading]="loading"
	[columns]="columns"
	[rows]="rows">
</aui-table>

There are more properties/options/events available but they need to be explained in the readme and shown on the demo page.

readme: /packages/table/README.md
demo page: /packages/table/examples/table/pages/demo

Describe the bug

The code snippet documentation does not mention that highlightjs must be installed into the project in some way. Either this should happen automatically or the instructions should document how to include highlightjs properly.

To Reproduce

Steps to reproduce the behavior:

1. Start a new app based on ngx-components
2. Go to 'https://github.com/digipolisantwerp/acpaas-ui_angular/blob/master/packages/code-snippet/lib/README.md'
3. Follow the instructions for using the code snippet, put two components on a single page.
4. The latter of the two will not display correctly, the console shows the error "hljs is not defined".

Expected behavior

The instructions should be correct when applied to a new project.

Describe the bug

Setting defaults with the Context Service should influence the default title of the styleguide app, but it doesn't.

To Reproduce

Following the guidelines as described in the Context README, I've set the defaults in the appModule using the following settings in the AUIModules.
You can find this code in the acpaas-ui_angular repository and see the result on https://digipolisantwerp.github.io/acpaas-ui_angular/

export const AUIModules = [
	ContextModule.forRoot({
		useTitleSuffix: true,
		extendTitle: true,
		titleDelimiter: ' | ',
		defaults: {
			titleSuffix: 'Context Module',
		},
		routerContext: true,
	}),
];

Expected behavior

I expect the original title 'Acpaas UI | Angular Modules' to be expanded with the suffix 'Context Module', but I only see the original title until the app redirects to the modules page.

OS (please complete the following information):

• Device: MacBook Pro (Retina, 13-inch, Late 2013)
• OS: macOS High Sierra (Version 10.13.6)
• Browser: Chrome 69, Safari 12, Firefox

Describe the bug

Now that the flyout bug is fixed, the datepicker shows some weird behaviour when navigating with the keyboard. When the datepicker field is focused, the datepicker opens.

Pressing escape does not close it however, forcing the user to tab through the entire picker view (worst case 30+ tabs).

To Reproduce

Navigate through a form with the keyboard.

Expected behavior

Proposed solutions:

Solution 1: skip the datepicker button in the taborder

Since the user is submitting the form using the keyboard, they will most likely enter the date by typing in the input field instead of navigating the datepicker.

Solution 2: only open the datepicker on a click/key press.

The button is tabbable but will only open the picker if it is pressed (now it is opened on focusing the datepicker field).

Closing the datepicker with escape or by clicking outside of the picker (when focused) should also be possible (see #146).

Additional context

This behaviour should be checked against WCAG guidelines.

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

We are looking for a clean way to displays errors, warnings or other visual feedback next to form fields.

Describe alternatives you've considered

N/A

Additional context

Styling should follow the Core Branding guidelines as found here: https://a-ui.github.io/core_branding_scss/#atoms-input

Ideally the warning and error fields should be accompanied by an optional error text, using the .u-text-danger or .u-text-warning classes.

Describe the bug

the example for localstorage fails on the npm run styleguide. "no exported member 'LocalStorageService'".

A clear and concise description of what the bug is.

Styleguide crashed when you import any type out of the packages (according to TOMO)

To Reproduce

Steps to reproduce the behavior:

• Create an example for the LocalStorage
• in the example demo.page.ts: import { LocalstorageService } from '@acpaas-ui/ngx-components/localstorage';
• run npm run examples

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

OS (please complete the following information):

• Device: HP ProBook
• OS: WIN10
• Browser N/A
• Version N/A

Additional context

Add any other context about the problem here.

Describe the bug

Console error when clicking on 'Window' in the 'Utils'

To Reproduce

Steps to reproduce the behavior:

Go to 'https://digipolisantwerp.github.io/acpaas-ui_angular/modules/utils/window'

Expected behavior

works in local version!

Screenshots

If applicable, add screenshots to help explain your problem.

OS (please complete the following information):

• Device: MacBook Air
• OS: macOS Mojave
• Browser: All

Screenshots

Describe the bug

[Title says it all]

To Reproduce

Steps to reproduce the behavior:

• Create an example page for the forms module, like you would do for any other module
• in the example: import { AnySubModule } from '@acpaas-ui/ngx-components/main-module'; and add it to the imports from the example.
• run npm run examples

Expected behavior

All examples should be build, but bow it gives an error on the import of the submodule (see below for details).

Screenshots

N/A

OS (please complete the following information):

• Device: MacBook Pro (Retina, 15-inch, Early 2013)
• OS: macOS X 10.13.6
• Browser: N/A
• Version: N/A

Additional context

When running npm run examples, this is the error you get:

BUILD ERROR
: Unexpected value 'AutoCompleteModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/dist/forms/forms.d.ts' imported by the module 'FormsExamplesModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/packages/forms/examples/forms/forms.module.ts'. Please add a @NgModule annotation.

Error: : Unexpected value 'AutoCompleteModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/dist/forms/forms.d.ts' imported by the module 'FormsExamplesModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/packages/forms/examples/forms/forms.module.ts'. Please add a @NgModule annotation.

    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
    at Object.compileSourceFiles (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

: Unexpected value 'AutoCompleteModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/dist/forms/forms.d.ts' imported by the module 'FormsExamplesModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/packages/forms/examples/forms/forms.module.ts'. Please add a @NgModule annotation.

Error: : Unexpected value 'AutoCompleteModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/dist/forms/forms.d.ts' imported by the module 'FormsExamplesModule in /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/packages/forms/examples/forms/forms.module.ts'. Please add a @NgModule annotation.

    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:53:68)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:7:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:3:12)
    at Object.compileSourceFiles (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ngc/compile-source-files.js:19:12)
    at Object.<anonymous> (/Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:26:32)
    at Generator.next (<anonymous>)
    at /Users/trianglejuice/Sites/Work/AUI/acpaas-ui_angular/node_modules/ng-packagr/lib/ng-v5/entry-point/ts/compile-ngc.transform.js:7:71
    at new Promise (<anonymous>)

When running npm run examples without importing the submodule, there's no problem.

When importing the submodule in any other (independent) app, there's no problem.

Describe the bug

AOT build fails when NotificationsModule is imported.

To Reproduce

Steps to reproduce the behavior:

1. Create new angular app (ng new myapp)
2. Install @acpaas-ui/ngx-components@latest
3. Import NotificationsModule from @acpaas-ui/ngx-components/notifications
4. Build ng build

Expected behavior

Build succeeds.

Screenshots

Describe the bug

The default Styleguide title is replaced by '| Context Module'.

To Reproduce

Steps to reproduce the behavior:

1. Open the (acpaas-ui_angular Styleguide)[https://digipolisantwerp.github.io/acpaas-ui_angular/] in a tabbed browser.

Expected behavior

The title in the tab of the browser should be 'Acpaas UI | Angular Modules' and it should update to 'Acpaas UI | Context Module' when you open the 'Context' example in de sidebar.

Screenshots

OS (please complete the following information):

Device: MacBook Pro (Retina, 13-inch, Late 2013)
OS: macOS High Sierra (Version 10.14.1)
Browser: All browsers

Describe the bug

The AutoComplete Component has a "focused && noResultsText && !searching && query && !results.length" if check in the display noResultsText, but it assumes results to be an object.

To Reproduce

Steps to reproduce the behavior:
Set results to undefined.

Expected behavior

A sanity check.

Screenshots

If applicable, add screenshots to help explain your problem.

OS (please complete the following information):

Independent of it.

Additional context

I am from Codific.

Describe the bug

Currently peerDependencies lists very specific versions. In projects that include these dependencies but in different versions we get peer dependency warnings whereas actually it works just fine.

"peerDependencies": {
    "@a-ui/core": "~2.3.0",
    "@a-ui/flexboxgrid": "~1.0.0",
    "@angular/animations": "~6.1.0",
    "@angular/common": "~6.1.0",
    "@angular/core": "~6.1.0",
    "@angular/forms": "~6.1.0",
    "@angular/http": "~6.1.0",
    "@angular/language-service": "~6.1.0",
    "@angular/platform-browser": "~6.1.0",
    "@angular/platform-browser-dynamic": "~6.1.0",
    "@angular/router": "~6.1.0",
    "rxjs": "~6.1.0",
    "rxjs-compat": "~6.1.0",
    "typescript": "~2.7.2"
},

Expected behavior

Less restrictive peerDependencies:

• @angular: ^6.0.0 to specify the entire angular 6 line is ok (or if there was some requirement in 6.1, use ^6.1.0)
• rxjs: same
  etc...

Describe the bug

When importing the autocomplete component in a project that uses the --aot flag for ng serve the following error is produced:

ERROR in : Unexpected value 'AutoCompleteModule 
in C:/digipolis/prototypes/my-app/node_modules/@acpaas-ui/ngx-components/forms/forms.d.ts' 
imported by the module 'AppModule in C:/digipolis/prototypes/my-app/src/app/app.module.ts'. 
Please add a @NgModule annotation.

To Reproduce

Steps to reproduce the behavior:

1. Follow the getting started instructions to create a new project
2. Import AutoCompleteModule in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AutoCompleteModule} from '@acpaas-ui/ngx-components/forms';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AutoCompleteModule
  ],

3. Add <aui-auto-complete> to app.component.html as per the example
4. Run ng serve --aot
5. See the error

Expected behavior

ng serve --aot flag should be supported

Is your feature request related to a problem? Please describe.

Form fields currently do not implement disabled states.

Describe the solution you'd like

They should.

During development of other monorepo setups some improvements were made that could be beneficial here as well. In this issue, I'll point out some flaws and areas that could be improved in the current setup and propose a solution for each one.

Custom scripts

Overall: some cleanup is required, might be an idea to move these tools to a custom cli package to remove some of the more trivial things from this repo.

We should use the built-in tooling as much as possible, and attempt to extend following angular-cli conventions (e.g. writing custom builders).

Build script

There are currently only 2 options when building:

1. build 1 package
2. build all packages

When building 1 package, the assumption is made that its dependencies are already built. When building all packages, dependencies are evaluated to build the packages in the right order.

Ideally, an option would be added to do the same when building 1 package.

Watch

Currently, there is no watch mode. This could be easily added using chokidar or built-in angular-cli tools.

Testing

Jest should be looked at as a valid alternative for the current karma+jasmine combo. The pattern matching allows developers to easily target the tests they are working on. Runtime in ci should improve as well.

Note: There are some options to integrate Jest with the angular-cli. The most promising one (imo) is this custom builder, allowing you to run jest with ng test.

There are some caveats though (besides support), the biggest one being an error that is thrown for each suite when running all tests. The tests do succeed but this creates an odd side effect to contributors.

Dependencies

Individual packages should not have their own dependencies. The current setup allows each package to define its dependencies, extracts them all to the root and attempts to resolve all conflicting versions with a custom script.

Following angular-cli conventions, all dependencies should be defined in the root, avoiding conflicts with locally installed packages.

Barrel files

Barrel files are a pain and should be avoided as much as possible, especially when working with TypeScript.

To resolve any issues, we should avoid using them altogether. Within 1 package all imports should be as specific as possible. To avoid having the module files grow exponentially, a file can be added in the root of each folder to aggregate the present types.

An example:

packages
|_ user
    |_ components
       |_ avatar
       |   |_ avatar.component.ts
       |_ profile
       |   |_ profile.component.ts
       |_ components.ts

// components.ts
import { AvatarComponent } from './avatar/avatar.component';
import { ProfileComponent } from './profile/profile.component';

export const UserComponents = [
  AvatarComponent,
  ProfileComponent,
];

export const UserEntryComponents = [
  AvatarComponent,
];

public_api.ts

The only barrel(-ish) file should be the public_api (following angular-cli naming conventions). Ideally, this is auto-generated, solving two issues simultaneously:

1. developers no longer have to manually update the file
2. everything present in the package is exported, avoiding auto exports and potentially conflicting variable names

I set up a package to do just that: https://github.com/tom-odb/named-exports.
Feel free to integrate/extend/copy-paste this into the acpaas-ui tooling.

Examples

The way the examples are currently set up is not manageable in the long term. Building a single example is impossible and actively developing in the styleguide is impractical and frustrating.

Proposition:

• separate the examples from the packages
• remove all custom scripting

tldr

1. custom scripts should be cleaned up, extended and moved to a custom tools (cli) package
2. tests should be run with Jest
3. dependencies should be moved to the root and only exist there
4. barrel files should be killed (with fire) and public_api's should be auto-generated
5. writing new examples is nearly impossible

Describe the bug

When the labels of 2 or more items in the list of the aui-autocomplete component are the same, the result of the onSelect handler will always be the first item, independently of which item is clicked.
The labels are the same because we use a custom template for the aui-selectable-list.

To Reproduce

Steps to reproduce the behavior:

1. Implement an aui-autocomplete with a custom template
2. Use the aui-autocomplete component to search for a string and make sure the result is a list where 2 or more items have the same label (but a different visual label in the custom template).
3. Select (click) the second item in the list.
4. The result of the onSelect handler is the first item.

Expected behavior

The result of the onSelect handler is the item we actually clicked.

OS (please complete the following information):

• Version [@acpaas-ui/ngx-components": "2.0.1]

About this policy

This issue is about this policy document.

Proposed changes

The slack channel urls need to point to an openly accessible slack space, and not the digipolis-internal slack space.

Describe the bug

When the element used as the flyout actions is not focused, the flyout immediately closes upon opening. If the element is focused everything seems to work fine.

To Reproduce

Can be reproduced in the examples.

Expected behavior

The flyout should open and close as expected.

Describe the bug

This repo still depends on rxjs-compat. We should remove this dependency to improve bundle size and encourage using rxjs 6+.

To Reproduce

Install the package in an Angular 6+ application without rxjs compat.

Expected behavior

Don't rely on rxjs-compat.

Screenshots

/

OS (please complete the following information):

/

Additional context

/