sq-ui / ng-sq-ui Goto Github PK

As a consumer, I want to be able to create my own custom templates for:

• sq-checkbox:
  • allow creating a custom template for the label
• sq-radio:
  • allow creating a custom template for the label
• sq-tags-input:
  • allow creating a custom template for each entered item
  • expose the remove method for each item in the template context, so that it can be used for custom remove buttons
• sq-typeahead:
  • allow creating a custom template for each option in the dropdown list
  • allow creating a custom template for each selected item
  • expose the remove method for each selected item in the template context, so that it can be used for custom remove buttons
• sq-dropdown:
  • allow creating a custom template for each option in the dropdown list
  • allow creating a custom template for each selected item
  • allow changing the chevron icon
• all elements:
  • allow usage of custom icons

Is your feature request related to a problem? Please describe.
I want to interact with the examples in the documentation.

Describe the solution you'd like
Remove GIF images. Add stackblitz.

Developer should be able to specify displayName$Key that will be used for the name of the option. This key should be present in the value object.

 <sq-typeahead 
      name="trainWagons"
      formControlName="trainWagons"
      [searchResults]="availableWagons"
      (onUserInputEnd)="searchMethod($event)"
      controlLabel="Wagons*"
      displayName="wagonName"
      [multiple]="true"
      controlPlaceholder="Add or remove wagons from this train">
    </sq-typeahead>

As a developer I want a nice nav bar + mobile layout.

Acceptance criteria:
This component should be part of the ng-sq-ui/common module.
Mobile layout should expand with animation.
Menu items should be configurable programmatically (e.g: as an array of objects, where one object represents a single menu item)

Reward: 0.5 DEV

I want to use custom templates and custom icons in the datetime picker component.

Should be super awesome and easy to use.

Describe the bug
The value returned by the datetime-picker component does not get updated real-time when I change the hours and/or minutes of the integrated time-picker.

To Reproduce
Steps to reproduce the behavior:

1. Install @sq-ui/ng-datetime-picker
2. Include the sq-datetime-picker component with its required time-picker config
3. After the component is rendered, start changing the hours and/or minutes of the time-picker using the up/down arrows

Expected behavior
The hours and/or minutes of the integrated time-picker should be reflected in the value returned by the datetime-picker component.

Screenshots
No screenshots but a Stackblitz preview of the problem:
https://stackblitz.com/edit/sq-datetime-picker-timepicker-bug

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 72.0.3626.121

Smartphone (please complete the following information):
Not applicable.

Update to latest angular:
This includes all libraries and subprojects.

Improvements:

• set all libraries to use the projects angular version instead of managing that by hand

Describe the bug
Title is wrong

To Reproduce
Steps to reproduce the behavior:

1. Go to https://sq-ui.github.io/ng-sq-ui/#/common-module

Expected behavior
To see the correct title

dependabot/dependabot-core#2219

As a developer I want to have a loading bar that fills to 100%.

• component
• example usage in app
• tests
• documentation

Additional context
Improve documentation. Should use the scrollToBottom directive.

It would be awesome if you create a date picker, time picker and datetime picker UI components with abilities to set, get and pick a date programmatically and from the UI. This also includes date/time formatters for the UI component to be able to display date and time in different formats.

• use moment.js to create underlying datepicker logic
• use moment.js to create underlying timepicker logic
• create UI
• make UI events programatically triggerable

A simple web component which should wrap the native <textarea> element

In a new empty directory on computer with:

Distributor ID: Ubuntu
Description: Ubuntu 18.04.1 LTS
Release: 18.04
Codename: bionic

[email protected] /usr/share/npm
Angular CLI: 6.0.8
Node: 8.10.0
OS: linux x64
Angular:
...
Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.1
typescript 2.7.2

I run the following commands:

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open

• everything is OK
  Control + C
  code . - opens VS Code
  npm i @sq-ui/ng-sq-ui

in ./src/app/app.module.ts

added
import { NgSqUiModule } from '@sq-ui/ng-sq-ui';
and
NgSqUiModule, // in imports

Added styles to angular.json
"./node_modules/@sq-ui/ng-sq-ui/sq-ui-theme.scss",
"./node_modules/font-awesome/scss/font-awesome.scss"
line 25 and 75

Added
some stuff in the app.component

TS:

dropdownOptions: LabelValuePair[] = [
{
label: 'option1',
value: 'someVal1'
},
{
label: 'option2',
value: 'someVal2'
},
{
label: 'option3',
value: 'someVal3'
}
];
HTML:

Previously I run into errors in the console, but then - probably the problems were on my side. Right now the styles are not being applied. Something small that I'm missing...

Help us improve our code quality.
Function ngOnChanges has a Cognitive Complexity of 6 (exceeds 5 allowed). Consider refactoring.

https://codeclimate.com/github/SQ-UI/ng-sq-ui/projects/ng-modal/src/lib/modal/modal.component.ts#issue_6137170aece75100010000ce

Reward for completing refactoring: 5 DEV

• migrate to latest esLint
• remove tsLint

Describe the solution you'd like
Migrate code to angular 8 guide

Migrate to angular 9

As a developer I want to have tooltip component / directive.

Acceptance criteria:
The tooltip directive / component should be created as part of the ng-sq-ui/common module.
Tooltip should detect the edges of the screen and prevent displaying out of the window.

Reward for completing this feature: 0.5 DEV

https://codeclimate.com/github/SQ-UI/ng-sq-ui/projects/ng-form-elements/src/lib/tags-input/tags-input.component.ts/source?from_sha=e92389f3&to_sha=827d7606

Function onUserInput has a Cognitive Complexity of 8 (exceeds 5 allowed). Consider refactoring.

This task has a bounty of 10 DEVs!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Add support for ng-add schematics, to automate the initial setup.

Describe the solution you'd like
A clear and concise description of what you want to happen.
Refer angular material, where they have schematics support.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.
https://material.angular.io/guide/getting-started#alternative-2-angular-devkit-6-

Is it compatible with Mobile browsers?

Function transformToLabelValuePairList has a Cognitive Complexity of 7 (exceeds 5 allowed)

https://codeclimate.com/github/SQ-UI/ng-sq-ui/projects/ng-form-elements/src/lib/typeahead/typeahead.component.ts/source?from_sha=e92389f3&to_sha=827d7606

This task has a bounty of 10 DEVs!

From community review feedback
A very frequent case with date pickers is having a from - to date to choose. It is infinitely more useful to have the option to have a separate FromToDatePicker, or a DatePicker type="from-to" which basically unites two regular date pickers, but provides their values in a single handler to make validation easier.

https://www.figma.com/file/P4QpiVvlqVriAtd4JSN9JT?node-id=1:5589#125184362